ant design vue的Upload头像上传

需求就是这么个需求，但实现起来也是为难我挺长时间的

看一下官网的介绍吧：头像上传

好巧不巧，第二个案例介绍的就和我的需求一样！
等我在这里测试一下，结果发现：

图片一直处于上传状态，怎么也展示不到页面上。
这是怎么回事呢？

得，问题就是它了，看一下api介绍：

非得加上这个属性吗？我就不能数据收集完再一起提交吗？
当然可以！！
需要这三个api： :show-upload-list="false" :before-upload="beforeUpload" @change="imageUpload"

详细介绍

具体实现

html部分：组件的使用以及相关配置项

            <a-upload name="avatar2" list-type="picture-card" class="avatar-uploader" :show-upload-list="false" :before-upload="beforeUpload" @change="imageUpload">
              <img v-if="imageUrl" :src="imageUrl" alt="avatar" style="height: 102px; width: 102px; border-radius: 50%" />
              <div v-else>
                <a-icon :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">Upload</div>
              </div>
            </a-upload>

js部分：文件上传前的处理和文件对象的上传

//import和export同级
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}



//methods里面的：
	beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg';
      if (!isJpgOrPng) {
        return this.$message.error('请上传正确的图片格式!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        return this.$message.error('图片大小必须小于2MB!');
      }
    },
    // 图片上传
    async imageUpload(info) {
      getBase64(info.file.originFileObj, (imageUrl) => {
        this.imageUrl = imageUrl;
      });
    },

主要做处理的是在change事件里面，调用了转base64的方法，方法里面可以把图像的url赋值、显示。

数据收集完，我们拿到的imageUrl就是转码base64格式的图片数据，传到后台就行了。

一些问题

a-upload的上传文件组件不满足条件的依旧上传

使用beforeUpload

上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 File 或 Blob 对象则上传 resolve 传入对象）。注意：IE9 不支持该方法。

使用：

    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg';
        if (!isJpgOrPng) {
          this.$message.error('请上传正确的图片格式!');
          return reject(false);
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('图片大小必须小于2MB!');
          return reject(false);
        }
	 if (this.fileList.length == 3) {
          	this.$message.error('可上传的长度为3，如若修改，请删除要更换的图片!');
          	return reject(false);
       	 }
        return resolve(true);
      });
    },

a-upload的文件上传组件单张图片会上传多次

在imageUpload钩子函数中需要根据文件状态来判断是否上传

// 图片上传
    async imageUpload(info) {
      const { file, fileList } = info;
      this.fileList = fileList;
      if (file.status == 'removed') {
       let arr = [];
        this.fileList.map((item) => {
          if (item.url) {
            arr.push(item.url);
          } else {
            let data = {
              imageBase64: item.thumbUrl,
            };
            uploadPhoto(data).then((res) => {
              arr.push(res.data.result.imgRayId);
            });
          }
        });
        setTimeout(() => {
          this.imgArr = arr;
          this.form.repairPic = arr.join(',');
        }, 500);
      }
      if (file.status == 'uploading' && file.thumbUrl !== '') {
        getBase64(file.originFileObj).then((res) => {
          let data = {
            imageBase64: res,
          };
          this.loading = true;
          uploadPhoto(data)
            .then((res) => {
              if (res.data.code == rayframework_http_success_code) {
                this.loading = false;
                this.imgArr.push(res.data.result.imgRayId);
                this.form.processPic.push(res.data.result.imgRayId);
              } else {
                this.loading = false;
              }
            })
            .catch(() => {
              this.loading = false;
            });
        });
      }
    },

上传图片的修改，需要可以删除、可以预览：status: ‘removed’,

 tomodifyRepairTicket(data).then((res) => {
        if (res.data.code == rayframework_http_success_code) {
          this.repairemergencytypeList = res.data.result.staticDictMap.repairemergencytype.staticDictList;
          this.repairCategoryList = res.data.result.listobject;
          this.addressList = this.gettreeData(res.data.result.logisticsPlaceTree);
          this.form = Object.assign(this.form, res.data.result.logisticsRepairTicket);
          this.addressValue = this.form.repairLocation.split('/');
          this.mergencytype = this.form.repairEmergency;
          this.repairCategory = this.form.repairCategory;
          this.reserveRepairTime = this.form.reserveRepairTime;
          this.imgArr = this.form.repairPic.split(',');
          this.imgArr.forEach((item, index) => {
            let obj = {
              uid: index,
              name: item.split('\\')[2],
              status: 'removed',
              url: item,
            };
            this.fileList.push(obj);
          });
          this.visible = true;
          this.$nextTick(() => {
            this.initMap();
          });
        }
      });

这里是飞鱼爱吃米，只授渔，不授鱼！