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

data解析完是表单数据格式

原文:点击链接

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » Ant Design + Vue实现上传文件、图片(复制即用)

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们