文档介绍的关键参数:
上传的组件:
1.<a-upload-dragger v-model:fileList="fileList" //双向绑定的变量是文件数组 name="file" // 发到后台的文件参数名 :before-upload="beforeUpload" //上传文件之前的钩子,参数为上传的文件 @change="handleChange" //change 上传文件改变时的状态 > <p class="ant-upload-text">上传文件</p> </a-upload-dragger>
上传的逻辑
1.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解析完是表单数据格式 FormData()这个函数不懂的点击蓝色字体查看用法
最后
如果对您有帮助,希望能给个👍评论/收藏/三连!
博主为人老实,无偿解答问题哦❤