vue.js - Vue - 每次上传的进度条

Question

我当前的进度条被所有文件共享，因此进度条来回跳跃。如何分隔每个上传文件的进度条？

submitFiles() {
  for( let i = 0; i < this.files.length; i++ ) {
    if(this.files[i].id) {
      continue;
    }
    let formData = new FormData();
    formData.append('file', this.files[i]);

    axios.post('/files/upload-file', formData, { headers: { 'Content-Type': 'multipart/form-data' },
      onUploadProgress: function( progressEvent ) {
        this.uploadPercentage = parseInt( Math.round( ( progressEvent.loaded / progressEvent.total ) * 100 ))
      }.bind(this)
    })
    .then(function(data) {
      this.files[i].id = data['data']['id'];
      this.files.splice(i, 1, this.files[i]);
      console.log('success');
      }.bind(this))
    .catch(function(data) {
      console.log('error');
    });
  }
}

编辑：

我尝试了这种方法，并且在console.log. 现在唯一的问题是如何percentage在进度条中存储 的值。

const myUploadProgress = (myFileId) => (progress) => {
  let percentage = Math.floor((progress.loaded * 100) / progress.total)
  console.log(myFileId)
  console.log(percentage)
  }
  for( let i = 0; i < this.files.length; i++ ) {
    var config = {
      onUploadProgress: myUploadProgress(this.files[i])
    }

    let formData = new FormData();
    formData.append('file', this.files[i].name);

    axios.post('/files/upload-file', formData, config, { headers: { 'Content-Type': 'multipart/form-data' },

模板：

 <v-progress-linear max="100" :value="??"></v-progress-linear>

标签： vue.js