vue+element-ui+axios多文件上传的实现并显示整体进度

下面我会详细讲解“vue+element-ui+axios多文件上传的实现并显示整体进度”的完整攻略，具体分为以下几个步骤：

第一步：安装所需依赖

在使用这种方式进行文件上传时，我们需要用到vue、element-ui和axios这几个主要的依赖。因此，首先需要在项目中安装它们：

npm install vue element-ui axios --save

第二步：在vue中实现上传文件的组件

我们可以通过封装一个组件来实现文件上传功能。该组件中应该包含以下内容：

• 添加上传文件的表单组件，使用element-ui实现；

• 配置el-upload的属性，其中action指向上传文件的接口，headers中设置请求头，multiple表示可以选择多个文件，show-file-list表示显示上传文件列表，on-progress表示上传进度回调函数；

• 实现上传文件的方法，在该方法中调用axios实现文件上传，将返回的上传进度和文件信息进行保存；

• 添加上传进度条组件，配合整体上传进度的展示；

这里给出一个示例代码，在代码中我们上传两个文件，同时展示整体上传进度的效果：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :headers="{Authorization: 'Bearer ' + token}"
      multiple
      show-file-list
      on-progress="handleProgress"
      :on-success="handleSuccess">
      <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-progress :percentage="uploadPercentage" :status="uploadStatus" :stroke-width="2" type="circle" style="width: 50px;"/>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      token: '',
      uploadPercentage: 0,
      uploadStatus: '',
    }
  },
  methods: {
    handleProgress(event, file, fileList) {
      this.uploadPercentage = event.percent;
    },
    handleSuccess(response, file, fileList) {
      this.uploadPercentage = 0;
      this.uploadStatus = 'success';
      console.log(fileList);
    },
    async uploadFile(file) {
      let formData = new FormData();
      formData.append('file', file);
      let response = await axios.post('https://jsonplaceholder.typicode.com/posts/', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: 'Bearer ' + this.token,
        },
        onUploadProgress: (progressEvent) => {
          this.uploadPercentage = parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total));
        },
      });
      return response;
    },
  },
};
</script>

<style scoped>
.upload-demo {
  margin-bottom: 20px;
}
</style>

第三步：整体上传进度显示

在上传多个文件时，我们需要实现整体上传进度的展示。因此，我们可以通过计算上传的文件数量与成功上传的文件数量比值来实现整体上传进度的展示。

下面是示例代码，其中handleSuccess方法中的uploadedFiles为已上传的文件列表：

<script>
import axios from 'axios';

export default {
  data() {
    return {
      token: '',
      uploadPercentage: 0,
      uploadStatus: '',
      uploadedFiles: [],
      uploadedFilesCount: 0,
    }
  },
  methods: {
    handleProgress(event, file, fileList) {
      this.uploadPercentage = event.percent;
    },
    handleSuccess(response, file, fileList) {
      this.uploadPercentage = 0;
      this.uploadStatus = 'success';
      this.uploadedFiles.push(file);
      this.uploadedFilesCount = this.uploadedFiles.filter(item => item.status == 'success').length / fileList.length * 100;
      console.log(this.uploadedFiles);
    },
    async uploadFile(file) {
      let formData = new FormData();
      formData.append('file', file);
      let response = await axios.post('https://jsonplaceholder.typicode.com/posts/', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: 'Bearer ' + this.token,
        },
        onUploadProgress: (progressEvent) => {
          this.uploadPercentage = parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total));
        },
      });
      return response;
    },
  },
};
</script>

第四步：总结

通过上述步骤我们可以实现vue+element-ui+axios多文件上传的实现并显示整体进度。其中，主要需要注意的是在使用axios进行文件上传时，我们需要将提交的内容进行封装。另外，在组件中利用FileList管理上传文件列表，可以方便地进行文件上传管理。

以上是一个简单的示例，如果需要上传大量或者较大的文件，需要进行优化。比如，可以将文件分片上传、增加上传操作中断功能等。