element-ui中的upload组件带token的两种方法

前端之家收集整理的这篇文章主要介绍了element-ui中的upload组件带token的两种方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

方法1(默认方式):

  1. <el-upload
  2. action="http://irhfuwu.com:5566/OE/UploadFile/AttachUpload";
  3. multiple
  4. :limit="3"
  5. :headers="myHeaders" //注:此处也可以使用computed来传动态值
  6. :on-success="sucH">
  7. <el-button size="small" type="primary">点击上传1</el-button>
  8. </el-upload>
  9.  
  10. ...
  11.  
  12. data: {
  13. myHeaders: {
  14. token: "324234234234324343pz9cvbg3Rw="
  15. }
  16. },

方法2(不用action,改用自写ajax方式):

  1. <el-upload
  2. action="#"
  3. :before-upload="beforeUpload"
  4. multiple
  5. :limit="3"
  6. :on-success="sucH">
  7. <el-button size="small" type="primary">beforeUpload方式上传</el-button>
  8. </el-upload>
  9.  
  10. ....
  11.  
  12. beforeUpload:function (file) {
  13. var fd = new window.FormData();
  14. fd.append('key',file,'fileName')
  15. axios.post("http://irhfuwu.com:5566/OE/UploadFile/AttachUpload";,fd,{
  16. headers: {
  17. token: "456436523YZgX6PXALReS5l51QwzVf0eQnYvDJJBKxG91Wpz9cvbg3Rw="
  18. }
  19. }).then(function (res) {
  20. console.log(res);
  21. });
  22. return false // 返回false不会自动上传
  23. }

猜你在找的Ajax相关文章