el-upload实现自定义上传http-request-Toy模板网

这篇具有很好参考价值的文章主要介绍了el-upload实现自定义上传http-request。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

el-upload http-request,vue,html,前端,elementui,javascript

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

el-upload http-request,vue,html,前端,elementui,javascript

发现得问题有2个:

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

el-upload http-request,vue,html,前端,elementui,javascript

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

el-upload http-request,vue,html,前端,elementui,javascript

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

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

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

上传组件的代码：

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;