参考文档:https://2x.antdv.com/components/upload-cn
let fileList = ref([]); // 这里是存放你上传的文件数据
const handleChange = (info) => { // 这里可以看到文件处于什么状态 如果你不写也没关系
if (info.file.status !== 'uploading') {
console.log('info', info.file, info.fileList);
}
if (info.file.status === 'done') {
message.success(`${info.file.name} 导入成功`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} 导入失败`);
}
};
const uploadLink = (info) => { // 这里是关键 你自定义的方法上传
console.log('info', info.file);
fileList.value.push(info.file); // info 就是文件的数据 给它加到 fileList里面
let formData = new FormData(); // 创建一个 FormData 表单对象 (一般上传文件都是存放在表单里)
fileList.value.forEach((file) => { // 再把你刚刚存放文件的数组 循环遍历 让它里面的值加到formData里面 (不会使用FormData的方法可以看我的另一篇介绍)
formData.append('uploadExcel', file);
});
// 最后在把这个表单对象作为接口变量传过去
api
.sLinkUpload(formData)
.then((res) => {
fileList.value = []; // 清空
message.success(res.msg);
console.log(res);
})
.catch((err) => {
fileList.value = [];
console.log(err);
});
};
// customRequest 通过覆盖默认的上传行为,可以自定义自己的上传实现 是一个Function ,accept是接受的文件类型
<a-upload file-list={this.fileList} name="file" multiple={true} onChange={this.handleChange} accept=".doc, .docx, .txt, .xls, .xlsx, .JPG, .JPEG, .PNG, .GIF, .BMP" customRequest={this.uploadLink}>
<a-button type="primary">
<upload-outlined></upload-outlined>
上传
</a-button>
</a-upload>