在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="primary">选取附件</el-button>
<el-button style="margin-left: 10px;" v-if="fileList.length>0" size="small" type="success" @click="submitFileForm">上传附件</el-button>
</el-upload>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submitFileForm">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import store from "../../../store"
export default{
name:"uploadFile",
data() {
return {
dialogVisible:false,
//回显附件列表
fileList: [],
//上传附件列表
files:[],
};
},
mounted(){
//显示已有附件
this.getFiles()
},
methods:{
//by文章id获取附件列表
getFiles(){
var articleId=0
articleId=store.state.articleMsg.row.id
console.log(articleId)
this.$store.dispatch('fileManage/getFiles',articleId).then(res=>{
if(res.succeeded){
res.data.forEach(file=>{
this.fileList.push({name:file.fileName,id:file.fileId});
})
}
else
{
this.$message({
type:'error',
message:'获取附件失败'
})
}
})
},
//上传文件之前
beforeUpload(file){
this.fileList.forEach(item=>{
if(isEquael(item.fileName,file.name)){
return this.$message.warning("该文件已存在")
}
})
},
// 上传发生变化钩子
handleFileChange(file, fileList){
this.files = fileList;
this.fileList.push(file)
},
//文件个数超过最大限制时
fileExceed(file, fileList){
if(this.fileList.length>10){
this.$message.warning("附件个数不能超过10个")
}
},
//删除前的钩子
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
//删除的钩子
onRemove(file,fileList){
if(file.status==="success")
{
var requestData=file.id
this.$store.dispatch('fileManage/deleteFile',requestData).then(res=>{
if(res.succeeded){
this.fileList.pop(file)
this.fileList=[];
this.files = fileList;
this.$message({
type: 'success',
message: '删除成功!'
});
this.getFiles()
}else{
this.$message({
type: 'error',
message: '删除失败!'
});
}
}).catch(()=>{
this.$message({
type: 'error',
message: '请求失败!'
});
})
}
},
// 提交上传文件
submitFileForm(){
//判断是否有文件再上传
if (this.files.length === 0) {
return this.$message.warning('请选取文件后再上传')
}
//-- 创建新的数据对象 -->
let formData = new FormData();
//-- 将上传的文件放到数据对象中 -->
this.files.forEach((file) =>{
formData.append('files',file.raw)
})
//拿到文章id
var articleid=store.state.articleMsg.row.id
formData.append('articleid',articleid)
this.$store.dispatch('fileManage/uploadFile',formData)
.then(res => {
if(res.succeeded){
this.$message.success('上传成功！');
this.fileList=[]
this.getFiles()
}else{
this.$message.error('上传失败');
}
})
.catch(error => {
this.$message.error('上传失败！');
});
this.dialogVisible=false
}
}
}
</script>