[JavaScript知识库] Ant Design Vue如何上传文件、图片，复制即用

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Ant Design Vue如何上传文件、图片，复制即用 -> 正文阅读

[JavaScript知识库]Ant Design Vue如何上传文件、图片，复制即用

文档介绍的关键参数：

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解析完是表单数据格式?