vue实现多文件上传

zhuoyunluo77

已于 2022-09-09 20:39:40 修改

阅读量7.6k

点赞数 6

分类专栏： vue2 elementui 文章标签： vue.js 前端 elementui

于 2022-09-06 11:29:58 首次发布

本文链接：https://blog.csdn.net/w__qwwq/article/details/126721105

版权

本文通过实例展示了在Vue项目中如何利用ElementUI的Upload组件进行多文件上传，包括上传完成后的效果展示及关键代码实现，重点在于根据文件状态区分已上传和待上传文件。

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

在vue项目中使用elementui 的 upload 上传组件，完成多个文件一次上传

一、效果图：

1.选择上传的文件：
待上传文件
2、上传完成：
已上传文件
3、删除文件：
待删除文件

二、主要的代码实现

注意处理列表中已上传文件何待上传文件，两者其实有区分的标志。我们可以在控制台中输出选择上传的文件列表，查看每个文件的代码信息，观察可以发现，如果是已上传的文件，则文件的状态status=“success”，如果是待上传文件，那么文件的状态status=“ready”。我们可以通过文件的状态来处理已上传至服务器和待上传至服务器的文件。

主要代码如下：

<template>
<div>
    <el-button type="text" @click="dialogVisible = true">上传附件</el-button>

   <el-dialog  width="400px" :visible.sync="dialogVisible" append-to-body>
     <div style="float:left">
         <el-upload 
          class="upload-demo"
          ref="upload"
          :limit="10" 
          accept=".txt, .txts, .pdf, .docx" 
          :multiple="true"
          action=" "      
          :on-change="handleFileChange"
          :on-remove="onRemove"
          :before-remove="beforeRemove"
          :on-exceed="fileExceed"
          :auto-upload="false"
          :file-list="fileList" 
          >
          <el-button slot="trigger" size="small" type