Ant Design Vue如何上传文件、图片,复制即用_a-upload-dragger
博主为人老实,无偿解答问题哦❤CSDN大前端交流社区-CSDN大前端交流论坛-CSDN社区云不知道你们用的什么环境,我一般都是用的Python3.6环境和pycharm解释器,没有软件,或者没有资料,没人解答问题,都可以免费领取(包括今天的代码),过几天我还会做个视频教程出来,有需要也可以领取~给大家准备的学习资料包括但不限于:Python 环境、pycharm编辑器/永久激活/翻译插件pytho
文档介绍的关键参数:
| 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 class="ant-upload-text">上传文件</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解析完是表单数据格式

最后
如果对您有帮助,希望能给个👍评论/收藏/三连!
博主为人老实,无偿解答问题哦❤
CSDN大前端社区邀请您加入:CSDN大前端交流社区-CSDN大前端交流论坛-CSDN社区云
最后
不知道你们用的什么环境,我一般都是用的Python3.6环境和pycharm解释器,没有软件,或者没有资料,没人解答问题,都可以免费领取(包括今天的代码),过几天我还会做个视频教程出来,有需要也可以领取~
给大家准备的学习资料包括但不限于:
Python 环境、pycharm编辑器/永久激活/翻译插件
python 零基础视频教程
Python 界面开发实战教程
Python 爬虫实战教程
Python 数据分析实战教程
python 游戏开发实战教程
Python 电子书100本
Python 学习路线规划

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
更多推荐

所有评论(0)