文档介绍的关键参数：
| beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 File 或 Blob 对象则上传 resolve 传入对象）。注意：IE9 不支持该方法。 |
(file, fileList) => boolean | Promise |
无 |
上传的组件：
<a-upload-dragger
v-model:fileList="fileList" // 双向绑定的变量是文件数组
name="file" // 发到后台的文件参数名
:before-upload="beforeUpload" // 上传文件之前的钩子，参数为上传的文件
@change="handleChange" //change 上传文件改变时的状态
>
<p >上传文件</p>
</a-upload-dragger>
上传的逻辑：
import axios from "axios";
//TS
interface FileItem {
uid: string;
name?: string;
status?: string;
response?: string;
url?: string;
}
//拦截提交事件，将文件数据填入 List
const fileList = ref < FileItem[] > ([]);
const beforeUpload = (file: FileItem) => {
fileList.value = [...fileList.value, file];
formState.name = fileList.value[0].name;
return false;
};
//确认提交按钮回调，如果不要这个按钮可以直接在 beforUpload 里面调用
const onSubmit = (e) => {
const data = new FormData();
// 上传多个文件需要循环
fileList.value.forEach((file: FileItem) => {
file.status = "uploading";
data.append("file", file.originFileObj);
data.append("type", "FILE");
});
// 添加 token
// data.append("token", String(token));
// 新建一个修改头部的 axios，因为我其他的数据是通过 URLSearchParams 提交的，识别的头不同
const upload_ax = axios.create({
baseURL: "/api", //在 vite.config.js 配置的跨域
withCredentials: true, //上传请求时是否携带 cookie
headers: {
"Content-Type": "multipart/form-data",
},
});
//用新的对象提交
upload_ax.post('这里写上传链接的地址', data).then((response) => {
// 处理数据完成情况
console.log(response.data, "response");
});
};
上面的 data 解析完是表单数据格式 ：
