vue使用antdesign upload上传图片

效果：

未上传：

上传成功：

 html:

<a-upload name="avatar" list-type="picture-card" class="avatar-uploader img-upload"
  :multiple="false"
  :before-upload="value=>beforeUpload(value,1)"
  :customRequest="uploadImage"
  :file-list="fileList1"
  @preview="handlePreview(1)"
  @change="handleChange"
  :remove="file=>deleteFileItem(file,1)">
  <div v-if="fileList1.length < 1">
    <a-icon :type="loading1 ? 'loading' : 'plus'" />
    <div class="ant-upload-text">
      上传
    </div>
  </div>
</a-upload>

 css:

.avatar-uploader>.ant-upload {
  width: 128px;
  height: 128px;
}

.img-upload{
  width: auto;
  flex: 1;
}

data:

fileList1: [],
loading1: false,
currentImg:'',

js:

    //删除上传的图片
    deleteFileItem(file,indexs) {
      if(indexs){
        this.currentImg=indexs
      }
      //找到当前文件所在列表的索引
      let index = this[`fileList${this.currentImg}`].indexOf(file);
      //从列表中移除该文件
      this[`fileList${this.currentImg}`].splice(index, 1);
      return true;
    },

    //上传之前的校验
    beforeUpload (file,index) {
      this.currentImg=index
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('只能上传图片!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('图片必须小于2MB!');
      }
      return isJpgOrPng && isLt2M;
    },

    //该方法当上传列表新增上传和删除上传项都会执行，我们可以通过状态来获取最新的fileList内容，其中状/态有loading,removed,done。
    handleChange(data) {
      if (data.file.status == "removed") {
        this[`fileList${this.currentImg}`] = data.fileList;
      }
    },

    //图片预览
    async handlePreview(index) {
      if(index==3){
        this.previewImage=this.form3.real_phone+'?v=1234'
      }else if(index==4){
        this.previewImage=this.form3.real_industry+'?v=1234'
      }else{
        this.previewImage=this.form3[`img${index}`]+'?v=1234'
      }
      this.previewVisible = true;
    },

    uploadImage(file) {
      const formData = new FormData();
      formData.append("file", file.file);
      this.saveFile(formData);
    },

    saveFile(file) {
      let _this=this
      this[`loading${this.currentImg}`]= true;
      $.ajax({
          url:'xxx',
          data:file,
          type:'post',
          contentType:false,
          processData:false,
          success:function(backData){
            _this[`loading${_this.currentImg}`]= false;
            _this[`fileList${_this.currentImg}`].push({
              uid: _this[`fileList${_this.currentImg}`].length + 1,
              name: backData.result,
              status: "done",
              url: backData.result,
            });
            _this.$message.success(backData.message);
          },
          error:function(backData){
            _this[`loading${_this.currentImg}`]= false;
            _this.$message.error(backData.message);
          },
      })
    },