vue批量手动上传文件

后端

多个文件上传服务器

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

前端

上传文件列表

上传文件列表自定义

界面代码

  
              
 
            

          {{item.name}}
          
            
          
  

1
2
3
4
5
6
7
8
9
10
11
12
13

自定义文件列表，怎么初始化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
          });
        }          
      }
1
2
3
4
5
6
7
8
9
10
11

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

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

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

      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;
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

删除文件

文件列表删除

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

1
2
3
4
5
6
7
8
9
10

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

deleteFilePaths初始化

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

删除文件时

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

向后端发送删除请求

      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});
        })
      }
1
2
3
4
5
6

向后端发上传文件接口时从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);
        });
      },  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

手动批量上传文件，

		
            :auto-upload="false"
             multiple           
		
                       
1
2
3
4
5

自己调上传文件接口

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

上传的文件列表保存数据库用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);
         }         
      }
1
2
3
4
5
6
7
8

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

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

删除文件时遍历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;
          }
        }
      }
1
2
3
4
5
6
7
8
9
10

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

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});
        })
      },
1
2
3
4
5
6

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

      async save(){
        await this.batchDeleteFile();
        await this.fetchBatchUpload();
        updatenotice(this.form,this.filePathList).then(() => {
          })
      }
1
2
3
4
5
6