wkiwi的博客

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

发布时间:4个月前热度: 306 ℃评论数:

在开发过程中遇到了文件上传需求,因是老代码也使用了element-ui,所以上传我也使用了其中的 el-upload,官方提供了demo,但是没有自定义上传文件的demo


html


<el-upload
        :show-file-list="false"
        action="customize"
        class="upload-demo"
        :http-request="uploadLogo"
        :on-change="uploadFileChange"
        :file-list="logoList"
      >
        <el-button size="small" type="primary" plain>点击上传</el-button>
        <div slot="tip" class="el-upload__tip">
          (请上传图片不超过2M的png、jpeg、jpg格式)
        </div>

      </el-upload>


js

/**
     * @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' }

element-ui,http-request,formData,new FormData()

手机扫码访问