el-upload添加FormData参数，自定义上传接口

最新推荐文章于 2024-03-26 14:07:04 发布

徐哥在线

最新推荐文章于 2024-03-26 14:07:04 发布

阅读量815

点赞数 6

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_45750721/article/details/135001817

版权

添加 :http-request="selfUpload"：

<el-upload
 :disabled="saveLoading"
 class="upload-demo"
  :limit="1"
  :on-exceed="handleExceed"
  :before-upload="beforeAvatarUpload"
  :file-list="fileList"
  :auto-upload="true"
  :http-request="selfUpload"
  accept=".xls,.xlsx">
  <el-button size="small" type="primary">上传excel</el-button>
</el-upload>

编写自定义上传方法handleExceed()，在方法里面调用uploadFile()发送上传请求：

selfUpload(params) {
      const formData = new FormData(); 
      formData.append('file', params.file); // 上传文件
      formData.append('wechat', 86654698); // 上传参数
      formData.append('headers', getStore('Access-Token')) // 上传其他参数
      this.uploadFile(formData) // 发送请求
    },
uploadFile(params) {
   this.saveLoading = true
   post('/upload/file',params).then(res=>{
     if(res.data.code===200){
       this.$message.success(res.data.msg)
     }else {
       this.$message.error(res.data.msg)
     }
     this.saveLoading = false
     this.fileList = [] // 清空上传列表
   }).catch((err) => {
  	  this.saveLoading = false
     console.log(err)
   })
 },