vue+elementui el-upload上传文件携带参数

Posted smile-fanyin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+elementui el-upload上传文件携带参数相关的知识,希望对你有一定的参考价值。

<el-upload
  ref="upload"
  style="display:inline;margin-left:10px;"
  action="url"
  :auto-upload="false"
  :multiple="false"
  :show-file-list="false"
  :before-upload="beforeUpload"
  :on-change="changeFile"
  accept=".xlsx,.xls"
  :file-list="fileList">
</el-upload>
export function parsingExcelAddData (data, setId) {
  return fetch({
    url: ‘‘,
    method: ‘post‘,  // 方式一定是post
    headers: {
      ‘Content-Type‘: ‘multipart/form-data‘,
      ‘setId‘: setId      //放到formData里后端拿不到,所以放到请求头里了
    },
    data: data    // 参数需要是单一的formData形式
  })
}
beforeUpload(file) {
      let filename = file.name
      let arr = filename.split(‘.‘)
      if (arr[1] !== ‘xls‘ && arr[1] !== ‘xlsx‘) {
        this.$message.error(‘上传文件只能是 excel/xls 格式!‘)
        return false
      }
      return arr
},
changeFile(file,fileList) {
      let fd = new FormData();
      fd.append(‘file‘,file.raw);//传文件
      let self = this
      parsingExcelAddData(fd,this.dataObj.setId).then(function(res){
        if (res.data.success) {
          self.$message({
            type: ‘success‘,
            message: ‘上传成功‘
          })
          self.currentNodeData(self.dataObj.setId)  //此方法是重新刷数据,可以自己写
        } else {
          self.$message({
            type: ‘warning‘,
            message: res.data.msg
          })
          return false
        }
      })
}
 

原文链接:https://blog.csdn.net/weixin_43173924/article/details/89395537

以上是关于vue+elementui el-upload上传文件携带参数的主要内容,如果未能解决你的问题,请参考以下文章

vue+elementui el-upload 上传文件时携带其他的参数

elementUI+el-upload 上传文件大小与文件类型校验

vue+elementUi+el-upload实现上传获取本机文件路径获取本机服务器路径电脑盘符createObjectURLgetElementsByClassName

elementui el-upload图片文件上传必传校验

vue 使用element-ui的el-upload httprequest实现上传文件到后台的功能

elementui+vue自定义接口上传