文件上传onUploadProgress使用

1.html5的type=file支持多文件上传，只需设置multiple属性即可

      <input style="display:none"  type="file"  id="file" name="file"  ref="file"  multiple="multiple"  @change="fileChange($event)" />

2.通过files属性访问type="file"的上传文件，会返回一个FileList对象，可以根据此对象获取用户上传文件的信息内容，包括文件名name及文件类型MIME类型及size大小。

    fileChange(event) {
      let filelist = event.target.files;
      let formData = new FormData();
      if (filelist.length > 0) {
        for (let i = 0; i < filelist.length; i++) {
          formData.append("fileList", filelist[i]);
          let filedata = {
            name: filelist[i].name.substring(0, filelist[i].name.length-4),
            size: filelist[i].size,
            date: filelist[i].lastModified,
            percent: 0
          };
          this.fileUploadList.push(filedata);
        }
      }
    },

3.通过axios的进度条事件onUploadProgress获取上传文件的进度，显示进度信息。

          let config = {
            timeout: 120000,//设置超时时长
            onUploadProgress: function(progress) {
              this.fileUploadList[i].percent = Math.round(
                  (progress.loaded * 100) / progress.total
              );
            }.bind(this)
          };

调用api

/**
 * 添加音乐
 */
export function AddMusics(filelist, conf) {
    return http.post('/musicManage/addMusic', filelist,conf)
}

完整代码如下所示
UploadMusic.vue

<template>
  <div class="fileupload">
    <div class="fileupload-title">
      <el-button type="primary" for="file" @click="$refs.file.click()">文件上传</el-button>
      <input
        style="display:none"
        type="file"
        id="file"
        name="file"
        ref="file"
        multiple="multiple"
        @change="fileChange($event)"
      />
    </div>
    <div class="fileupload-content">
      <el-table :data="fileUploadList" border stripe>
        <el-table-column label="文件名称" prop="name"></el-table-column>
        <el-table-column label="上传进度">
          <template slot-scope="scope">
            <div>
 <el-progress :status="scope.row.isSuccess==1?'success':scope.row.isSuccess==2?'exception':null" :percentage="scope.row.percent"></el-progress>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

import { AddMusics } from "../../api/playTaskApi";
import { Message } from "element-ui";
export default {
  data() {
    return {
      fileUploadList: []
    };
  },
  methods: {
    fileChange(event) {
      let filelist = event.target.files;
      let formData = new FormData();
      if (filelist.length > 8) {
        Message.success({
          message: "上传文件个数不能超过8个"
        });
        return;
      }
      if (filelist.length > 0) {
        for (let i = 0; i < filelist.length; i++) {
          formData.append("fileList", filelist[i]);
          let filedata = {
            name: filelist[i].name.substring(0, filelist[i].name.length-4),
            size: filelist[i].size,
            date: filelist[i].lastModified,
            isSuccess:0,//是否上传成功,0上传中，1成功，2失败
            percent: 0
          };

          this.fileUploadList.push(filedata);
          let config = {
            timeout: 120000,
            onUploadProgress: function(progress) {
              this.fileUploadList[i].percent = Math.round(
                (progress.loaded * 100) / progress.total
              );
            }.bind(this)
          };
          this.uploadFile(formData, config,this.fileUploadList[i]);
        }
      }
    },

    uploadFile(formdata, conf,loadItem) {
      AddMusics(formdata, conf).then(res => {
        if (res.success) {
          loadItem.isSuccess=1;
          Message.success({
            message: "上传成功"
          });
        }else{
          loadItem.isSuccess=2;
           Message.warning({
            message: "上传失败"
          });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.fileupload {
  display: flex;
  flex-direction: column;
  .fileupload-title {
    display: flex;
    justify-content: flex-end;
    padding: 5px 0px;
  }
  .fileupload-content {
    flex: 1;
  }
}
</style>