element-ui 同时上传图片和文件（手动上传）

最新推荐文章于 2024-07-05 13:59:17 发布

夕心o

最新推荐文章于 2024-07-05 13:59:17 发布

阅读量515

点赞数

分类专栏： javascript element-ui vue 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_38779317/article/details/125601748

版权

本文详细介绍了如何使用 Element-UI 框架实现同时上传图片和文件的功能，重点在于手动触发上传过程，适用于前端开发中的文件管理场景。

摘要由CSDN通过智能技术生成

// 上传图片
<el-upload
  ref="uploadImage"
  class="uploadImageWrap"
  action=""  // 设置空, 上传图片, 上传文件以及表单数据用的同一个接口
  :auto-upload="false" // false 手动上传, true 自动上传
  :show-file-list="false"
  :list-type="picture-card"
  aceept=".png, .jpg" // 设置上传文件格式
  :data="uploadData" // 上传数据（这里可以不需要, 自上传图片并携带数据可以使用 data）
  :on-change="uploadAvatarChange"
  :on-success="uploadAvatarSuccess">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

// 上传文件
<el-upload
  ref="uploadFile"
  class="uploadFileWr