在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