antdv upload customRequest 前端上传方法

最新推荐文章于 2025-06-27 14:12:50 发布

原创最新推荐文章于 2025-06-27 14:12:50 发布 · 3.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #vue.js #es6 #前端

本文介绍如何在Ant Design Vue库中使用upload组件的customRequest选项来自定义前端上传文件的逻辑，涉及到typescript和es6语法的应用，适用于Vue.js前端项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:
<a-upload
    v-model:file-list="fileList"
    list-type="picture-card"
    :before-upload="beforeUpload"
    @change="handleChange"
    :show-upload-list="false"
    :customRequest="customImageRequest"
>
    <div class="upload-box" v-if="imageUrl">
        <img :src="imageUrl" alt="avatar" />
        <div class="delete" @click="delteImg">
            <DeleteOutlined />
        </div>
    </div>

    <div v-else>
        <plus-outlined />
        <div class="ant-upload-text">上传签名</div>
    </div>
</a-upload>

js:

// 图片压缩成base64
function getBase64(img: Blob, callback: (base64Url: string) => void) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result as string));
    reader.readAsDataURL(img);
}


const fileList = ref([]);

// 上传文件改变时的状态
const handleChange = (info: any) => {
    if (info.file.status === undefined) {
       fileList.value = fileList.value.filter((item, index) => {
            return index < fileList.value.length - 1;
        });
    }

    if (info.file.status === 'uploading') {
        loading.value = true;
        return;
    }
    if (info.file.status === 'error') {
        loading.value = false;
        message.error('upload error');
    }
};

// 上传文件之前的钩子，参数为上传的文件，若返回 false则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 File或 Blob对象则上传 resolve 传入对象）。注意：IE9 不支持该方法。
const beforeUpload = (file: FileItem) => {
    const isJpgOrPng =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/tiff' ||
        file.type === 'image/jpg';
    if (!isJpgOrPng) {
        message.error('请上传jpeg，png，tiff，jpg格式图片');
        return false;
    }
    const isLt2M = file.size / 1024 / 1024 < 10;
    if (!isLt2M) {
        message.error('上传图片太大，已超出10M');
        return false;
    }

    return true;
};

// 通过覆盖默认的上传行为，可以自定义自己的上传实现(只写了前端没有写请求)
const customImageRequest = (info:any)=>{
    const { file } = info;
    getBase64(file, (base64Url: string) => {
        imageUrl.value = base64Url;
    });
    setTimeout(()=>{
        loading.value = false;
    })
};

// 删除图片
const delteImg = (e:Event)=>{
    e.stopPropagation();
    imageUrl.value = '';
};