项目背景
在移动端项目中,使用 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,
: {
: ,
: ,
},
});
}


