Ant Design Vue Upload 自定义上传 customRequest #

// 文件上传 api 函数简单封装
export const uploadApi = ({ file }) => {
  const formData = new FormData();
  formData.append('file', file);
  // ... 略，formData 其他实现逻辑
  return axios({
    url: '/api/upload',
    method: 'POST',
    data: formData,
    headers: {
      'Content-type': 'multipart/form-data',
    },
  });
};

<a-upload
    v-model:file-list="fileList"
    list-type="picture-card"
    name="file"
    :multiple="true"
    :customRequest="customUpload"
    @change="handleChange"
>
    <upload-outlined></upload-outlined>
</a-upload>

<script>
...
const fileList = ref([]);

// 自定义文件上传公共函数
// e - 上传组件返回的上传实例，里面包括 file，和一些组件方法
// e.file - 上传的文件实例对象
// e.onSuccess(ret, xhr)
// e.onError(err, ret)
const customUpload = (e) => {
  console.log(e);
  // uploadApi 你的二次封装上传接口  
  uploadApi({
      file: e.file
  })
    .then((res) => {
      console.log('上传成功', res.data);
      // 调用实例的成功方法通知组件该文件上传成功
      e.onSuccess(res.data, e);  
    })
    .catch((err) => {
      // 调用实例的失败方法通知组件该文件上传失败
      e.onError(err);
    });
};

</script>

// 自定义文件上传公共函数
// e.onProgress(event)  event的格式为 {percent:xxx}
const customUpload = (e) => {
  console.log(e);
  // 上传接口  e.file 就是接口所用的 file
  uploadApi({
    file: e.file,
    onUploadProgress: (ev) => {
      // ev - axios 上传进度实例，上传过程触发多次
      // ev.loaded 当前已上传内容的大小，ev.total - 本次上传请求内容总大小
      console.log(ev);
      const percent = (ev.loaded / ev.total) * 100;
      // 计算出上传进度，调用组件进度条方法
      e.onProgress({ percent });
    },
  })
    .then((res) => {
      console.log('上传成功', res.data);
      e.onSuccess(res.data, e);
    })
    .catch((err) => {
      e.onError(err);
    });
};

// 文件上传 api
export const uploadApi = ({ file, onUploadProgress }) => {
  const formData = new FormData();

  formData.append('file', file);
  // ... 略，formData 其他实现逻辑

  return axios({
    url: '/api/upload',
    method: 'POST',
    data: formData,
    headers: {
      'Content-type': 'multipart/form-data',
    },
    onUploadProgress, // 上传进度回调函数 onUploadProgress(ev)
  });
};

<a-form :model="formInfo">
  <a-form-item label="your name">
    <a-input v-model:value="formInfo.name" />
  </a-form-item>

  <a-form-item label="身份证上传">
    <a-upload
      v-model:file-list="fileList"
      list-type="picture-card"
      name="file"
      :multiple="true"
      :customRequest="customUpload"
      @change="handleChange"
    >
      <upload-outlined></upload-outlined>
    </a-upload>
  </a-form-item>

  <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
    <a-button type="primary" @click="onSubmit">Submit</a-button>
    <a-button style="margin-left: 10px">Cancel</a-button>
  </a-form-item>
</a-form>

<script>
...

const fileList = ref([]);
const formInfo = reactive({
  name: '阿姣🐷',
});

// 获取上传成功的文件 url 数组
const getSuccessFileUrls = (list) => {
  let urls = [];
  list.forEach((item) => {
    // 获取上传成功的文件数据
    if (item.status === 'done' && item.response) {
      urls.push(item.response.url); //改为你想获取的数据格式
    }
  });
  return urls;
};

// 表单提交
const onSubmit = () => {
  const urls = getSuccessFileIds(fileList.value);
  console.log(urls);
  console.log(toRaw(formInfo));
  ...
  submitInfoApi(data)
      .then(res=>{})
      .cathc(err=>{})
};
</script>

<script>
const fileList = ref([]);

const fetchDetail = ()=>{
    getInfoDetail(data).then(res=>{
       let imageUrls = res.data.images; // 详情数据 
       imageUrls.forEach(item=>{
           let newItem = {
              uid: 'xxxx1',
              response: {
                id: 'xxxx1',
                origin_name: 'image1.png',
                url: 'http://xxx/image1.png',
              },
              name: 'image1.png',
              status: 'done',
              url: 'http://xxx/image1.png',
           };
           fileList.value.push(newItem); // 赋值文件列表
       });
       ...
    });
}
</script>