element-ui自定义上传(http-request)踩坑

代码如下
/**
     * @desc: 上传logo
     * @Author: wkiwi
     * @function: uploadLogo
     * @param {*} param
     */
    uploadLogo(param){
      const file = param.file;
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("请上传2M以下的logo");
        return false;
      }
      this.toUploadFile(file,'logo')
    },
/**
     * @desc: 上传文件
     * @Author: wkiwi
     * @function: toUploadFile
     * @param {*}
     */
    toUploadFile(file,fileType){
      // 通过 FormData 对象上传文件
      var formData = new FormData();
      formData.append("file", file);
      formData.append("file_type", fileType);//文件类型，logo:logo, banner:banner
      uploadFile(
        formData
      ).then(res=>{
        console.log(res)
      })
      console.log('fileName',file.name)
    },

因为上传业务中涉及到文件类型的判断，所以需要使用formData 处理对象

注意上述代码有除file还有file_type字段，需要统一formData

不可出现下述情况（自己在这搞了两个小时，拍死自己）

代码如下
    /**
     * @desc: 上传文件
     * @Author: wkiwi
     * @function: toUploadFile
     * @param {*}
     */
    toUploadFile(file,fileType){
      // 通过 FormData 对象上传文件
      var formData = new FormData();
      formData.append("file", file);
      formData.append("match_id", this.matchId);
      formData.append("file_type", fileType);//文件类型，logo:logo, banner:banner
      uploadFile({
        file:formData,file_type:fileType
      }).then(res=>{
        console.log(res)
      })
      console.log('fileName',file.name)
    },

action需要设置一个字符串，不填写会报警告

在使用axios中 需要单独设置请求头

代码如下
   headers:{
        'Content-Type':'multipart/form-data' //值得注意的是，这个地方一定要把请求头更改一下
　　　　},

如果请求参数使用了 qs 进行了封装，那么在上传的时候请对上传的参数去掉 qs 的封装，要不然会引起一些问题

代码如下
return  params instanceof FormData ? parame : qs.stringify(params, { arrayFormat: 'repeat' }