vue项目中实现多文件上传功能实例代码

<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>