vue el-upload上传文件方法 详细解答 action 和 http-request两种方式

vue el-upload上传文件方法 详细解答 action 和 http-request两种方式

包括action 和 http-request两种方式

  <el-upload
          ref="upload"
          class="upload-demo"
        
           <!--  action方式主要是下面四个参数|方法 -->
          :headers="uploadheaders"
          :data="excdata"
          :action="importUserUrl"
          :on-success="handleSuccess"

           <!--  绑定 http-request 时自动覆盖action方式  -->
          :http-request="uploadFile"
 
          :before-remove="beforeRemove"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :multiple="false"
          :auto-upload="false"
          :limit="1"
          accept=".xls,.xlsx"       
        >
          <el-button size="small" type="primary">上传文件</el-button>
          <div slot="tip" class="el-upload__tip" style="margin-top:12px;"> 仅支持.xls、.xlsx格式单个文件上传导入，且大小不超过1M</div>
</el-upload>
<br>
 <el-checkbox v-model="checked">更新已经存在的用户数据</el-checkbox>

<el-button type="primary" @click="importUser">确 认</el-button>

handleExceed(file, fileList) {   // 文件个数超出时
      // this.$message.warning(`仅支持上传单个文件，请确认后重试！`);
      // console.log(file[0])
      this.fileList = []
      this.fileList.push(file[0])   // 默认覆盖上个文件
},
beforeRemove(file, fileList) {  // 移除上传的文件
      return this.$confirm(`确定移除“${file.name}”？`);
},

1、默认方式 action 上传

可配置:action="importUserUrl"   :headers="uploadheaders"
importUserUrl，uploadheaders配置全局挂载导vue实例即可
上传时要附加其他参数，绑定 :data="excdata" 即可

Vue.prototype.importUserUrl = axios.defaults.baseURL + 'web/member/import'
var token = localStorage.getItem('loginToken')
Vue.prototype.uploadheaders = {
  'X-user_session_key': token,
  'X-User': token
}

上传成功回调方法 绑定 handleSuccess 方法

handleSuccess(res, file) { // action 上传时的回调
      this.ifload = false
      if (res.status == '200') {
        this.$message.success(res.message || '文件导入成功，稍后查询处理结果');
        this.fileList = []
        this.handleClose();
      } else {
        this.$message.error(res.message || '文件导入失败，稍后重试');
      }
    },

自定义上传相比action上传，扩展性更强，当项目里上传需求较多，且连接不同接口地址时，配置uploadheaders 配置很多显然不太优雅。

2、http-request方式 会覆盖action方式， uploadFile方法里拿到file后，转formdata

注意：自定义上传时，需要对该上传设置一下请求头 。 在拦截器里设置请求头

if (config.url.includes('/member/import')) {  // 导入文件设置请求头
      config.headers['Content-Type'] = 'multipart/form-data'
    }

自定义上传的触发方式 ，点击确定时在importUser里执行，执行这句即是执行uploadFile方法

this.$refs.upload.submit();

uploadFile方法 （亲测有效）

async uploadFile(params) {
      const _file = params.file;
      const isOverride = this.checked == true ? 1 : 0
      const formData = new FormData();
      formData.append('file', _file);
      formData.append('isOverride', isOverride); // isOverride自定义的其他参数

      const res = await this.$api.user.importUserExcel(formData)  // 调用接口
      this.ifload = false

      if (res.status == '200') {
        this.$message.success(res.message || '文件导入成功，稍后查询处理结果');
        this.fileList = []
        this.$emit('refresh-list', true);
        this.handleClose();
      } else {
        this.$message.error(res.message || '文件导入失败，稍后重试');
      }
    },

注意： formdata打印不出来，实际有值