使用a-upload上传图片或者文件(符合规则，显示在fileList，不符合不显示)

晒干的老咸鱼

已于 2023-04-27 14:10:34 修改

阅读量3.6k

点赞数

分类专栏：问题汇总文章标签： javascript vue.js 前端

于 2023-04-25 11:05:42 首次发布

本文链接：https://blog.youkuaiyun.com/chali1314/article/details/130360286

版权

问题汇总专栏收录该内容

27 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了如何在Vue项目中使用Ant Design Vue的a-upload组件进行图片和文件上传，包括如何控制fileList仅显示符合条件的文件，如何在上传前后进行文件回显，特别是当文件名缺失时的图片回显策略。通过beforeUpload处理文件流，并在$nextTick中处理已上传文件的回显状态。

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

本文主要是总结使用ant-design-vue使用a-upload上传图片或者文件

模板部分代码如下：

<a-row :gutter="24">
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item label="版本图标上传" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-upload :beforeUpload="beforeImgUpload" @change="handleImgChange" :file-list="imgFileList" accept="image/png, image/jpeg" :disabled="type === 3">
                <a-button> <a-icon type="upload"/> 选择文件</a-button>
              </a-upload>
            </a-form-item>
          </a-col>