ant-design-vue组件的upload上传头像上传三次的问题（图片多次上传问题）

问题描述

使用upload组件时，发现上传方法会被调用3次，对于上传单张图片来说这似乎没什么问题；
但是使用fileList参数时，就会发现即使你只上传了一张图片，但是处理后的图片为三张重复图片，这样的话如何匹配对应上传动作为对应的图片数量是需要我们进行处理的。

问题分析

上传方法多次调用是由于图片的上传机制导致的。

文件上传状态有：uploading done error removed；

若是不给action参数，文件会走uploading done error 这三个状态，每个状态都进行一个上传动作，最后得到三张重复照片是必然的。
至于说指定done状态再处理上传后的图片是不可行的，原理不是很清楚，但是有了action，就能精准匹配done状态来处理图片数据。

至于说上传单张图片没问题是因为若是不使用fileList参数，upload组件就只接收一个地址。

解决方案

在使用组件的时候给action的属性值为上传地址，然后再change方法里面判断文件的上传状态为done再进行照片的转base64和上传动作

组件：

<a-upload name="avatar" action="http://192.168.0.10:8080/xx/xx/xx" class="avatar-uploader" :show-upload-list="false"  @change="imageUpload6">
   <img v-if="imageUrl6" :src="imageUrl6" alt="avatar" />
   <div v-else>
      <a-icon :type="'plus'" />
   </div>
 </a-upload>
 
方法：
    async imageUpload6({ file, fileList }) {
      if (file.status === 'done') {
        getBase64(fileList[fileList.length - 1].originFileObj).then((imageUrl) => {
          let data = {
            staffId: this.staffId,
            photoBase64: imageUrl,
          };
          changePhoto(data).then((res) => {
            if (res.data.code == rayframework_http_success_code) {
              this.imageUrl6 = res.data.result.sysStaffPhoto.showPhoto;
            }
          });
        });
      }
    },