Ant Design Vue如何上传文件、图片，复制即用(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”,

},

});

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素