Function: multi file upload and unified submission

One 、 demand ：

The front-end realizes multi file uploading , Uniformly submit the data returned by the server after uploading , Submit and save the last file immediately after uploading , No time interval .

Two 、 Thought analysis ：

2.1、 Click upload --> call file Method --> call upload Method , We define two variables flagA and flagB, Record the number of times the two methods are executed , Every time you execute +=1,file Execute first ,upload After execution , therefore upload After the method, we compare flagA and flagB Value , If flagA Greater than flagB There are still files to upload , If flagA be equal to flagB The description is the last file . This is the time when we call save .

2.2、 Take uploading three files as an example ：

	file	upload	contrast flag	result
file 1	flagA+=1	flagB+=1	flagA > flagB	Upload not completed
file 2	flagA+=1	flagA+=1	flagA > flagB	Upload not completed
file 3	flagA+=1	flagA+=1	flagA = flagB	Upload to complete , Execution method

3、 ... and 、 Code ：

3.1、 Definition flag：

flagA: 0, //  Record file
flagB: 0, //  Record upload

3.2、 Record file：

toRequestFile(data) {
   this.flagA += 1
   this.toRequest(data, 'file');
},

3.3、 Record upload：

toRequest(data, type) {
      const fd = new FormData();
      fd.append('file', data.file);
      commonUpload(fd).then(res=>{
        this.$message({ type: 'success', message: ' Upload successful ' });
      }).finally(()=>{
        this.flagB += 1 //  Record upload
        console.log('914flagA-flagB', this.flagA, this.flagB)
      })
    },

3.4、 effect ：

 

  Upload three files , Three times upload Execute finish printing 3,3, It indicates that all three files have been executed .

Four 、 Welcome to communicate and correct , Pay attention to me , Learning together .