vue+antd实现文件上传

最新推荐文章于 2025-03-17 21:38:19 发布

原创

最新推荐文章于 2025-03-17 21:38:19 发布

· 3.4k 阅读

5 ·

版权

文章标签：

#vue #前端

该博客介绍了如何使用Vue.js结合Ant Design组件库实现文件上传功能，包括单文件和多文件上传的代码示例，以及上传参数的设置。同时，提到了封装的通用上传组件在前端开发中的应用。

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

前言

提示：上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程

upload上传

单文件上传代码如下（示例）：

  <a-upload name="avatar"
    class="avatar-uploader"
      list-type="picture-card"//上传列表的内建样式
     :show-upload-list="false"
     :action="common.initUpLoadUrl('file/******')"//上传的地址
     :before-upload="beforeUpload"//上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传
     @change="handleChange1"//上传文件改变时的状态
   >
     <img v-if="form.logo.length > 0" :src="form.logo" alt="avatar" />
     <div v-else>
       <a-icon :type="loading ? 'loading' : 'plus'" />
       <div class="ant-upload-text">点击上传</div>
     </div>
   </a-upload>

多文件上传代码如下（示例）：

   <a-upload
    :action="common.initUpLoadUrl('file/******')"
        list-type="picture-card"
        :file-list="fileList"
        @preview="handlePreview"//点击文件链接或预览图标时的回调
        @change="handleChanges"
        name="avatar"
      >
        <div v-if="fileList.length < 8">
          <a-icon type="plus" />
          <div class="ant-upload-text">点击上传</div>
         </div>
   </a-upload>
     <a-modal
         :visible="previewVisible"
         :footer="null"
         @cancel="handleCancel"
       >
         <img alt="example" style="width: 100%" :src="previewImage" />
      </a-modal>