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'
            })
          }
        })
      },
    }
}