Ant Design Vue Upload 自定义上传 customRequest，这一篇很详细

超级罗伯特

于 2024-06-26 14:17:54 发布

阅读量548

点赞数 5

分类专栏： vue3 文章标签： vue.js 前端 javascript ant design vue upload customRequest

本文链接：https://blog.csdn.net/m0_68633804/article/details/139987779

版权

vue3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Upload 常用属性和方法

在这里插入图片描述

示例上传接口

# 接口文档
url `https://www.mocky.io/api/main/upload`
头部
x-token: 'xxx'  
参数
file: File   // 上传的文件
flag: 'xxx'  // 上传的标识

// 文件上传 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"
    name="file"
    :multiple="true"
    action="https://www.mocky.io/api/main/upload"
    :headers="{ x-token: 'xxx' }"
    :data="{ flag: 'xxx' }"
    @change="handleChange"
  >
    <a-button>点击上传</a-button>
</a-upload>

基本使用方式可以满足大部分上传需求，但是也存在局限性，仅限于配合该组件的属性使用。如果是已经封装好了上传的请求函数（包括头部信息和请求中间件等），可在多个地方使用，还使用该方式拼接 data,headers 就有点冗余了。

customRequest 自定义上传

简单使用

使用组件的 customRequest 属性覆盖默认的上传行为，可以自定义自己的上传实现

<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>

这样的话，实现自定义的上传函数，二次封装上传接口，例如在uploadApi使用 axios 对基本路径、头部信息和请求参数的封装。

在请求成功后调用组件实例成功回调onSuccess(ret,xhr)，回传的ret 将会存放在fileList 中的 file.response 中，可运用这点存放所需的数据。

进度条的实现

由于前面简单使用的时候我们自定义了上传逻辑，组件未能监听到上传的进度 fileList 中的 file.percent 会一直处于 0 的状态。所以下面我们实现一下请求进度逻辑，补全该进度条。

// 自定义文件上传公共函数
// 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);
    });
};

看上去也就多了个onUploadProgress参数。不过这个参数并非只是 uploadApi 方法的。还需要在请求实例（axios）中配置该上传进度回调参数。

// 文件上传 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)
  });
};

实现了上传进度逻辑，自定义上传的文件列表 fileList 中的 file.percent 才会正确反应进度情况

配合表单组件使用

以 Vue3 的概念逻辑代码为例

<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>

获取详情后回显表单

请求信息详情接口成功后，将图片文件等url重新按照 fileList 的格式赋值文件列表。

<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>