el-upload实现自定义上传http-request

在使用element的上传组件的时候,我这里用的是上传图片,如图1所示

 

正常上传是没有问题的,但如果我上传了第一张之后,然后去上传第二张,依次这样去替换自己想要得,虽然最后一张会把上传上传得给覆盖,但是还是会存在一些问题

 发现得问题有2个:

1.替换多少次,上传接口就要请求多少次,显得比较多余,浪费性能

 

  2.就是如果你上传的第三张图片比较大的话,那么可能还没有等到第三张图片上次成功,保存接口就已经调用完了,结果提交的是第二张图,不是最新的第三张(如果你的逻辑是上上传图片接口调用完成之后马上调用提交接口的话),如图3

 解决方式:使用http-request自定义上传

1.不管替换多少次,都只会取最后一次(可以解决上面的第一个问题)

2.因为只会取最后一次,我们可以等上传接口成功之后再去调用提交按钮(可以解决上面第二个问题)

扫描二维码关注公众号，回复： 14716089 查看本文章

上传组件的代码：

html:
<el-upload
   ref="upload"
   class="upload"
   action="string"
   name="file[0]"
   :show-file-list="false"
   accept=".jpg,.jpeg,.png,.JPG,.JPEG"
   :headers="uploadHeader"
  :http-request="UploadImage"
  :auto-upload="false"
  :on-change="onChange"
  :on-success="onSuccess"
   >
   <img v-if="editForm.iconUrl" :src="editForm.iconUrl">
   <i v-else class="el-icon-plus avatar-uploader-icon avatar-upload" />
   <div slot="tip" class="el-upload__tip">
      <p>建议上传 100*100 png格式图片</p>
    </div>
  </el-upload>
js:
methods:{
    // 自定义上传
    UploadImage() {
      this.fileObj = this.file;
      // 创建文件流
      const formData = new FormData();
      formData.append('file[0]', this.fileObj.raw);
      // Format封装在utilsg工具函数中
      Format.fileUploader(formData, '/gallery/image_upload').then(
        (res) => {
          if (res.code === 0) {
            this.editForm.icon = res.data.list[0].file_url;
            this.submit();
          }
        }
      );
    },
  onChange(file) {
      const isJPG =
        file.raw.type === 'image/jpeg' || file.raw.type === 'image/png';
      const isLt2M = file.raw.size / (1024 * 1024) < 2;
      if (!isJPG) {
        this.$refs.upload.clearFiles();
        return this.$message.error('上传头像图片只能是 JPG 格式!');
      } else this.file = file;
      if (!isLt2M) {
        this.$refs.upload.clearFiles();
        return this.$message.error('上传头像图片大小不能超过 2MB!');
      } else this.file = file;
      this.editForm.file = file;
      const reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onloadend = (e) => {
        this.$set(this.editForm, 'iconUrl', e.target.result);
      };
    },
}

2.文件上传器封装

import request from './request';
import { Message } from 'element-ui';
const Format = {
  // 文件上传器
  fileUploader(formData, url) {
    return new Promise((resolve, reject) => {
      request
        .request({
          url: url,
          method: 'post',
          data: formData,
          timeout: undefined,
          headers: {
            'Content-Type': 'multipart/form-data;'
          }
        })
        .then((res) => {
          if (res.code === 1) {
            Message.error(res.message || '上传失败');
          }
          resolve(res);
        }).catch(err => {
          Message.error('上传失败' + err.data.message || '上传失败');
        });
    });
  }
};
export default Format;

使用http-request自定义上传的注意点

  1.action="abcd"这里不能删, action=""也可以为空字符串

  2.使用http-request方法的时候,:on-success,: on-error指令是不会触发的。