Ant-Design-Vue 自定义上传和图片预览功能

最新推荐文章于 2025-03-27 16:22:03 发布

中二Devil

最新推荐文章于 2025-03-27 16:22:03 发布

阅读量1w

点赞数 5

分类专栏：前端 ant design

本文链接：https://blog.youkuaiyun.com/exlinker/article/details/109479392

版权

本文介绍了如何使用Ant Design Vue实现自定义上传功能，通过`customRequest`属性结合`imgAdd`方法控制上传过程。关键在于成功上传时调用`onSuccess()`以更新文件状态。此外，还探讨了图片预览功能，包括Base64加载本地文件和通过后端文件下载接口加载图片的方法。

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

前端页面代码部分

<template>
    <a-upload list-type="picture-card" :customRequest="imgAdd" :remove="imgDel"
              :file-list="fileList" @preview="handlePreview" @change="handleChange">
        <div v-if="fileList.length < 9">
            <a-icon type="plus" />
            <div class="ant-upload-text">
                上传
            </div