element-ui多文件上传

上传方案一：
先将文件上传到七牛，再将七牛上传返回的文件访问路径上传到服务器

<div class="upload-music-container">
    <el-upload
      class="upload-music"
      ref="upload"
      action="http://up-z2.qiniup.com/"
      :data="{token:uploadToken}"
      multiple
      accept=".mp3"
      :before-upload="uploadBefore"
      :on-change="uploadChange"
      :on-success="uploadSuccess"
      :on-error="uploadError">
      <el-button size="small" type="primary">选取文件</el-button>
      <div slot="tip" class="el-upload__tip">仅支持上传mp3文件，文件大小不超过500M</div>
    </el-upload>
    <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
</div>
 

export default {
    name: 'uploadMusic',
    data() {
      return {
        headers: {},
        uploadToken: null,
        canUploadMore: true,
        fileList: null,
      }
    },
    created() {
      this.headers = {}     //此处需要与server约定具体的header
      this.getUploadToken()
    },
    methods: {
      //获取上传七牛token凭证
      getUploadToken() {
        this.$http.get('xxxxxxx', {headers: this.headers}).then(response => {
          if (response.data.status == 200) {
            let resp = response.data.data
            this.uploadToken = resp.token
          } else {
            this.$message({
              message: '获取凭证失败，请重试',
              type: 'error'
            })
          }
        })
      },
      //获取音频文件时长
      getVideoPlayTime(file, fileList) {
        let self = this
        //获取录音时长
        try {
          let url = URL.createObjectURL(file.raw);
          //经测试，发现audio也可获取视频的时长
          let audioElement = new Audio(url);
          let duration;
          audioElement.addEventListener("loadedmetadata", function (_event) {
            duration = audioElement.duration;
            file.duration = duration
            self.fileList = fileList
          });
        } catch (e) {
          console.log(e)
        }
      },
      //校验上传文件大小
      uploadChange(file, fileList) {
        this.fileList = fileList
        let totalSize = 0
        for (let file of fileList) {
          totalSize += file.raw.size
        }
        if (totalSize > 500 * 1024 * 1024) {
          this.canUploadMore = false
          this.$message({
            message: '上传文件不能不超过500M',
            type: 'warn'
          })
        } else {
          this.canUploadMore = true
        }
      },
      uploadBefore(file) {
        if (this.canUploadMore) {
          return true
        }
        return false
      },
      //上传成功
      uploadSuccess(response, file, fileList) {
        this.getVideoPlayTime(file, fileList)
      },
      //上传失败
      uploadError(err, file, fileList) {
        console.log(err)
      },
      //上传服务器数据格式化
      getUploadMusicList() {
        let musicList = []
        for (let file of this.fileList) {
          if (file.response && file.response.key) {
            musicList.push({
              "play_time": file.duration,  //播放时长
              "size": file.size/1024,      //文件大小 单位 kb
              "song_name": file.name,      //歌曲名
              "voice_url": "xxxx"          //上传七牛返回的访问路径
            })
          }
        }
        return musicList
      },
      //上传至服务器
      submitUpload() {
        let musicList = this.getUploadMusicList()
        this.$http.post('xxxxxxxxxx', {music_list: musicList}, {headers: this.headers}).then(response => {
          if (response.data.status == 200) {
            this.$refs.upload.clearFiles() //上传成功后清空文件列表
            this.$message({
              message: '上传服务器成功',
              type: 'success'
            })
          } else{
            this.$message({
              message: '上传服务器失败，请重试',
              type: 'error'
            })
          }
        }).catch(err => {
          this.$message({
            message: '上传服务器失败，请重试',
            type: 'error'
          })
        })
      },
    }
  }
  
  

上传方案二：
直接将文件上传到服务器

<div class="upload-music-container">
    <el-upload
      class="upload-music"
      ref="upload"
      multiple
      action=""
      :auto-upload="false"
      :http-request="uploadFile">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传mp3文件，且单次不超过500M</div>
    </el-upload>
</div>

export default {
    name: 'uploadMusic',
    data() {
      return {
        fileType:'video',
        fileData: new FormData(),
        headers:{},
      }
    },
    created() {
     this.headers={} //此处需要与server约定具体的header
    },
    methods:{
      //覆盖默认的上传行为，可以自定义上传的实现
      uploadFile(file){
        this.fileData.append('files',file.file);  //服务器最终接收到的是files[]数组
      },
      submitUpload() {
        this.$refs.upload.submit();//手动上传文件，此处表单提交后会自动调用uploadFile()方法，如果是多个文件就调用多次
        this.fileData.append('file_type',this.fileType);
        //传给server的文件数据，server可自行解析文件相关属性
        this.$http.post('xxxxxxxxxx',this.fileData,{headers:this.headers}).then(response=>{
          let resp=response.data
          if (resp.status == 'ok') {
            this.$message({
              message: '上传成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '上传失败，请重试',
              type: 'error'
            })
          }
        })
      },
    }
}