文档介绍的关键参数：
上传的组件：
<a-upload-draggerv-model:fileList="fileList" //双向绑定的变量是文件数组name="file" // 发到后台的文件参数名:before-upload="beforeUpload" //上传文件之前的钩子，参数为上传的文件@change="handleChange" //change上传文件改变时的状态><p class="ant-upload-text">上传文件</p></a-upload-dragger>
上传的逻辑
import axios from "axios";//TSinterface FileItem {uid: string;name?: string;status?: string;response?: string;url?: string;} //拦截提交事件，将文件数据填入Listconst 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, //上传请求时是否携带 cookieheaders: {"Content-Type": "multipart/form-data",},});//用新的对象提交upload_ax.post('这里写上传链接的地址', data).then((response) => {// 处理数据完成情况console.log(response.data, "response");});};
上面的data解析完是表单数据格式
FormData()这个函数不懂的点击蓝色字体查看用法
最后
如果对您有帮助，希望能给个👍评论/收藏/三连！
博主为人老实，无偿解答问题哦❤
CSDN大前端社区邀请您加入：CSDN大前端交流社区-CSDN大前端交流论坛-CSDN社区云
