文档介绍的关键参数:

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

FormData()这个函数不懂的点击蓝色字体查看用法

最后

如果对您有帮助,希望能给个👍评论/收藏/三连!

博主为人老实,无偿解答问题哦❤

CSDN大前端社区邀请您加入:CSDN大前端交流社区-CSDN大前端交流论坛-CSDN社区云

最后

不知道你们用的什么环境,我一般都是用的Python3.6环境和pycharm解释器,没有软件,或者没有资料,没人解答问题,都可以免费领取(包括今天的代码),过几天我还会做个视频教程出来,有需要也可以领取~

给大家准备的学习资料包括但不限于:

Python 环境、pycharm编辑器/永久激活/翻译插件

python 零基础视频教程

Python 界面开发实战教程

Python 爬虫实战教程

Python 数据分析实战教程

python 游戏开发实战教程

Python 电子书100本

Python 学习路线规划

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友,可以戳这里无偿获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐