vue批量手动上传文件

后端

多个文件上传服务器

传MultipartFile[] files，遍历files存到硬盘就可以

前端

上传文件列表

上传文件列表自定义

界面代码

<el-upload
           :file-list="fileList"
           :show-file-list="false">  <!--表示自定义文件列表-->
              <ul> <!--自定义文件列表-->
            <li v-for="(item,index) in fileList" 
            :key="index"
            type="text"
            size="small">
          <a>{{item.name}}</a>
          <i class="el-icon-circle-close" @click="onRemoveFile(item)" style="margin-left: 5px"></i>
            </li>
          </ul>  
</el-upload>

自定义文件列表，怎么初始化fileList,赋值文件路径（保存数据库用），文件名

      openEditDialog(row){
        this.fileList.splice(0, this.fileList.length);
        row.filePathList.forEach(item => {
          const filePath = item.filePath;
          const fileName = item.fileName;            
           this.fileList.push({
            filePath:filePath,
            name:fileName
          });
        }          
      }

在原有文件基础上添加新文件,直接给this.fileList 赋值就可以。保存函数见手动批量上传文件

      fileChange(file, fileList) {
        this.fileList = fileList; //直接赋值就可以         
      }

重复文件不让上传。同时选择多个文件也可以过滤

      fileChange(file, fileList) {
        let a = 0;
        fileList.forEach((item, idx) => {
        /*在此处，对比文件名，将文件名相同的对比次数累加，
        相同的文件名累加值为 2 时，说明文件名已经重复，直接删掉。*/
        if (file.name === item.name) {
          a++;
          if (a === 2) {
            this.$message({message: '文件名不能重复',type: 'info'});
            fileList.splice(idx, 1);
          }
        }
      })
        this.fileList = fileList;
      }

删除文件

文件列表删除

      onRemoveFile(file) {
        let fileList = this.fileList;
        for(let j=fileList.length-1;j>=0;j--){
          if(fileList[j].name==file.name) {
            fileList.splice(j,1);
            break;
          }
        }          
      }

删除服务器文件。保存的时候才向后端发请求删除服务器文件，所以用deleteFilePaths记录要删除文件

deleteFilePaths初始化

      openEditDialog(row){
        this.deleteFilePaths.splice(0,this.deleteFilePaths.length);
      }

删除文件时

      onRemoveFile(file) {
        /*保存的时候才触发删除，不然没有保存就把文件删除了*/
        const filePath =file.filePath;
        if(filePath!=undefined&&filePath!=null&&filePath!=""){//已经上传服务器的文件才删除
        this.deleteFilePaths.push(filePath); 
        }
      }

向后端发送删除请求

      async batchDeleteFile(){
        if(this.deleteFilePaths==undefined||this.deleteFilePaths==null||this.deleteFilePaths.length==0)      		 return;
        await batchDeleteFile(this.deleteFilePaths).then(()=>{}).catch(()=>{
          this.$message({type: "error",message: res.message});
        })
      }

向后端发上传文件接口时从fileList过滤已经上传的文件，利用file.raw不为空，过滤掉已有文件

自己写函数项后端发送请求。上传文件函数。多个文件用 fd.append(‘files’, file.raw)。利用file.raw不为空，过滤掉已有文件。只上传新增文件

      async fetchBatchUpload(){
        const fd = new FormData();

        for (const file of this.fileList) {//多个文件全部都放到files
          if(file.raw) {
          fd.append('files', file.raw);
          }
        }
        if(fd.get("files")==null||fd.get("files")==undefined) return;
        fd.append('modelType', 'N');
          fd.append('categoryType','');
          fd.append('month','');
          fd.append('year','');
          await batchUploadFile(fd).then(res =>{
          this.filePathList = this.filePathList.concat(res.data.data);
        });
      },  

手动批量上传文件，

		<el-upload>
            :auto-upload="false"
             multiple           
		</el-upload>
                       

自己调上传文件接口

<el-button type="primary" @click="save()">保存</el-button>   
async save(){
      //组装数据
      //向后端发送请求
     }

上传的文件列表保存数据库用filePathList。保存数据需要记录文件名，文件路径（下载的时候用）

初始化的时候

      openEditDialog(row){       
          this.filePathList.splice(0,this.filePathList.length);
         row.filePathList.forEach(item => {
          const filePath = item.filePath;
          const fileName = item.fileName;             
          this.filePathList.push("filePath="+filePath+";fileName="+fileName);
         }         
      }

文件上传完回调的时候添加新值

          await batchUploadFile(fd).then(res =>{
          this.filePathList = this.filePathList.concat(res.data.data);
        });

删除文件时遍历filePathList，用indexOf(file.name)找到要删除的文件

      onRemoveFile(file) {
        let filePathList = this.filePathList;
        for(let i=filePathList.length-1;i>=0;i--){
          let indexFilePath =filePathList[i].indexOf(file.name);
          if(indexFilePath!=-1) {
            filePathList.splice(i,1);
            break;
          }
        }
      }

保存的时候等删除完，再向服务器新增文件，再保存数据库记录文件记录

await 定义batchDeleteFile（）方法可以等向后端发送完请求再往下执行，async与await同步出现。所以async定义batchDeleteFile方法

      async batchDeleteFile(){
        if(this.deleteFilePaths==undefined||this.deleteFilePaths==null||this.deleteFilePaths.length==0) return;
        await batchDeleteFile(this.deleteFilePaths).then(()=>{}).catch(()=>{
          this.$message({type: "error",message: res.message});
        })
      },

调用 batchDeleteFile 要加await，async与await成对出现，所以async save()

      async save(){
        await this.batchDeleteFile();
        await this.fetchBatchUpload();
        updatenotice(this.form,this.filePathList).then(() => {
          })
      }