vue項目中實現(xiàn)多文件上傳功能實例代碼

更新時間：2022年11月28日 15:18:13 作者：zhuoyunluo77

我們平時經(jīng)常做的是上傳文件,下面這篇文章主要給大家介紹了關(guān)于vue項目中實現(xiàn)多文件上傳功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

一、效果圖：

1.選擇上傳的文件：

待上傳文件

2、上傳完成：

已上傳文件

3、刪除文件：

待刪除文件

二、主要的代碼實現(xiàn)

注意處理列表中已上傳文件何待上傳文件，兩者其實有區(qū)分的標志。我們可以在控制臺中輸出選擇上傳的文件列表，查看每個文件的代碼信息，觀察可以發(fā)現(xiàn)，如果是已上傳的文件，則文件的狀態(tài)status=“success”，如果是待上傳文件，那么文件的狀態(tài)status=“ready”。我們可以通過文件的狀態(tài)來處理已上傳至服務器和待上傳至服務器的文件。

主要代碼如下：

<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("該文件已存在")
      }
    })
    },
      // 上傳發(fā)生變化鉤子
    handleFileChange(file, fileList){
      this.files = fileList;
      this.fileList.push(file)
    },
    //文件個數(shù)超過最大限制時
    fileExceed(file, fileList){
      if(this.fileList.length>10){
         this.$message.warning("附件個數(shù)不能超過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('請選取文件后再上傳')
      }
      //-- 創(chuàng)建新的數(shù)據(jù)對象 -->
      let formData = new FormData();
      //-- 將上傳的文件放到數(shù)據(jù)對象中 -->
      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>