a-upload自定义上传(最大规模简化操作)

<template>

  <div style="margin: 10px 0;">
    <ta-upload
        :action="上传地址"
        listType="picture-card"
        :customRequest="handleCustomRequest"
        :fileList="fileList"
        @preview="handlePreview"
        @change="handleImageFileChange">
      <div v-if="fileList.length < 1">
        <ta-icon type="plus" />
        <div class="ant-upload-text">Upload</div>
      </div>
    </ta-upload>
    <ta-modal :visible="previewVisible" :footer="null" @cancel="handlePreviewCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </ta-modal>
  </div>
</template>
<script>  

import axios from 'axios';
export default {

  data() {
    return {
      previewVisible: false,
      previewImage: '',
      fileList: []
    }
  },
  methods: {
    async handleCustomRequest(options) {
      const {file, onProgress, onSuccess, onError} = options;

      console.log('自定义上传', options)

      try {
        // 创建取消令牌
        const source = axios.CancelToken.source();

        // 上传配置
        const config = {
          cancelToken: source.token,
          onUploadProgress: e => {
            const percent = Math.round((e.loaded / e.total) * 100);
            onProgress({percent});
          }
        };

        // 创建 FormData
        const formData = new FormData();
        formData.append('file', file);

        // 实际发送请求
        const response = await axios.post(this.$fileManageTool.getFileUploadUrl(), formData, config);
        if (response.data.errors && response.data.errors.length > 0) {
          this.$message.error(response.data.errors[0].msg)
          onError(response.errors[0].msg);
        } else {
          // 成功处理
          onSuccess(response.data
              , file);
        }

        // 返回中止方法（可选）
        return {
          abort() {
            source.cancel('用户取消上传');
          }
        };

      } catch (error) {
        if (axios.isCancel(error)) {
          console.log('请求被取消:', error.message);
        } else {
          onError(error);
        }
      }
    },

    handlePreviewCancel() {
      this.previewVisible = false
    },

    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl
      this.previewVisible = true
    },

    handleImageFileChange({fileList}) {
      this.fileList = fileList
      if (fileList.length > 0) {
        this.form.setFieldsValue({'imageContent': fileList[0].response?.data.vo.url})
      } else {
        this.form.setFieldsValue({'imageContent': ''})
      }
    },
  }
}
</script>