vue, 同一个页面有多处地方需要上传图片

<template>
  <div>
      <a-upload
        :fileList="fileList.imgList1"
        class="avatar-uploader"
        :beforeUpload="beforeUpload"
        listType="picture-card"
        action="/amo/dist/picUpload"
        :headers="headers"
        @preview="handlePreview"
        @change="value => handleChange(value, 'imgList1')"//vue是自带参数  ‘imgList1’是本人自定义的参数
      >
        <div v-if="fileList.imgList1.length<1">
          <a-icon type="plus" />
          <div class="ant-upload-text">Upload</div>
        </div>
      </a-upload>   
      <a-upload
        :fileList="fileList.imgList2"
        class="avatar-uploader"
        :beforeUpload="beforeUpload"
        listType="picture-card"
        action="/amo/dist/picUpload"
        :headers="headers"
        @preview="handlePreview"
        @change="value => handleChange(value, 'imgList2')"
      >
        <div v-if="fileList.imgList2.length<1">//如果一个上传需要上传多张图片，可以把1改成自己的张数
          <a-icon type="plus" />
          <div class="ant-upload-text">Upload</div>
        </div>
      </a-upload>
      <a-upload
        :fileList="fileList.imgList3"
        class="avatar-uploader"
        :beforeUpload="beforeUpload"
        listType="picture-card"
        action="/amo/dist/picUpload"
        :headers="headers"
        @preview="handlePreview"
        @change="value => handleChange(value, 'imgList3')"
      >
        <div v-if="fileList.imgList3.length<1">
          <a-icon type="plus" />
          <div class="ant-upload-text">Upload</div>
        </div>
      </a-upload>
      <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
        <img alt="example" style=" 100%;height:100%" :src="previewImage" />
      </a-modal>
    </div>
  
</template>
<script>
import { retriveMyDetail } from "@/api/information";
export default {
  data() {
    return {
      previewVisible: false,
      fileList: {
        imgList1: [],
        imgList2: [],
        imgList3: []
      },
      loading: false,
      imageUrl: "",
      previewImage: "",
      headers: {
        Authorization: "Bearer" + this.$store.state.user.token
      }
    };
  },
  created() {
    this.getTableList();
  },
  methods: {
    handleCancel() {
      this.previewVisible = false;
    },
    getTableList() {
      retriveMyDetail().then(res => {
        let picList = [
          res.data.qualificationPic1,
          res.data.qualificationPic2,
          res.data.qualificationPic3
        ];
        picList.map((item, index) => {
          if (item) {
            let imageName = index == "0"? "imgList1" : index == "1" ? "imgList2": "imgList3";
            let fileCode = item.split("/");;
            this.fileList[imageName].push({
              uid: -index,
              name: fileCode[fileCode.length - 1],
              status: "done",
              url: item
            });
          }
        });
      });
    },
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl;
      this.previewVisible = true;
    },

    handleChange( {fileList} ,info) {
      this.fileList[info] = fileList;
    },

    //上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg"; //判断上传文件格式
      if (!isJPG) {
        this.$message.error("You can only upload JPG file!");
      }
      const isLt2M = file.size / 1024 / 1024 < 5; //计算上传文件的大小
      if (!isLt2M) {
        this.$message.error("Image must smaller than 5MB!");
      }
      return isJPG && isLt2M;
    },
  }
};
</script>
<style>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>