wkiwi的博客

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

发布时间:5年前热度: 1225973 ℃评论数:

在开发过程中遇到了文件上传需求,因是老代码也使用了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

代码如下

  1. /**
  2. * @desc: 上传logo
  3. * @Author: wkiwi
  4. * @function: uploadLogo
  5. * @param {*} param
  6. */
  7. uploadLogo(param){
  8. const file = param.file;
  9. const isLt2M = file.size / 1024 / 1024 < 2;
  10. if (!isLt2M) {
  11. this.$message.error("请上传2M以下的logo");
  12. return false;
  13. }
  14. this.toUploadFile(file,'logo')
  15. },
  16. /**
         * @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

不可出现下述情况(自己在这搞了两个小时,拍死自己)

代码如下

  1. /**
  2. * @desc: 上传文件
  3. * @Author: wkiwi
  4. * @function: toUploadFile
  5. * @param {*}
  6. */
  7. toUploadFile(file,fileType){
  8. // 通过 FormData 对象上传文件
  9. var formData = new FormData();
  10. formData.append("file", file);
  11. formData.append("match_id", this.matchId);
  12. formData.append("file_type", fileType);//文件类型,logo:logo, banner:banner
  13. uploadFile({
  14. file:formData,file_type:fileType
    }).then(res=>{
  15. console.log(res)
  16. })
  17. console.log('fileName',file.name)
  18. },

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

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

代码如下

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

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

代码如下

  1. return params instanceof FormData ? parame : qs.stringify(params, { arrayFormat: 'repeat' }

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

您看完此新闻的心情是
收藏文章
表情删除后不可恢复,是否删除
取消
确定
图片正在上传,请稍后...
评论内容为空!
还没有评论,快来抢沙发吧!

热评话题

按钮 内容不能为空!
立刻说两句吧! 查看0条评论

手机扫码访问

Scan me!