elment-ui文件上传详解

最新推荐文章于 2024-03-31 11:15:44 发布

兔子R/T坦克

最新推荐文章于 2024-03-31 11:15:44 发布

阅读量426

点赞数 1

分类专栏：文件上传文章标签： vue

本文链接：https://blog.csdn.net/weixin_49050598/article/details/112538074

版权

博客详细介绍了在Vue项目中使用Element-UI进行文件上传的实践，包括HTML结构和JavaScript实现，展示了如何在弹出框中嵌套文件上传功能，并提供了一种实现方式的效果展示。

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

文件上传总有各种问题，算是给自己一个总结吧
HTML

 <el-form-item prop="" class="form-item">
  <template slot="label">上传文件:</template>
   <div class="form-info">
     <el-popover              ----弹出框设置
      placement="top"
      width="400"
      trigger="click">
      <el-upload
       style="background-color: #E8F8F6"
       accept=".pdf, .doc, .docx, .xls, .xlsx, .jpg, .png"    ---限制的文件类型
       :action="uploadUrl"       ---动态地址
       multiple                 ---可同时选择多个
       :limit="5"               ---最多上传5个文件
       ref="uplode"
       :on-preview="handlePreview"    ---点击上传文件
       :on-remove="handleRemove"      ---删除已上传文件
       :file-list="form.fileList"     ---本地列表
       :before-upload="beforeUpload"   ---文件上传前校验
       :on-change