文件上传onUploadProgress使用

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

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