Vue Vant van-uploader 文件上传接口封装方法

项目背景

在移动端项目中，使用 Vant 组件库进行文件上传时，van-uploader 组件本身不提供上传接口，需要自行封装处理。

HTML 代码

<van-uploader v-model="fileList" :max-size="5000 * 1024" multiple :after-read="onReadFile" />

Data 变量

fileList: []

Methods 方法

// 上传
onReadFile(file) {
   console.log(`file -->`, file);
   attachUpload(file).then((res) => {
     console.log(`res -->`, res);
   });
},

文件对象说明

file 对象用于传给后端，其中的 content 字段为 base64 格式，用于预览。

封装的接口代码

// 材料附件上传接口
export function attachUpload(data) {
  // 创建一个 FormData 对象来传递文件
  const formData = new FormData();
  formData.append('file', data.file); // 假设你的文件在 data 对象的 file 属性中

  return request({
    url: '/rest/zwdtAttach/private/attachUpload',
    : ,
    : formData,
    
    : {
      : ,
      : , 
    },
  });
}