<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文件，文件大小不超過(guò)500M</div>  </el-upload>  <el-button size="small" type="success" @click="submitUpload">上傳到服務(wù)器</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: '獲取憑證失敗，請(qǐng)重試',       type: 'error'      })     }    })   },   //獲取音頻文件時(shí)長(zhǎng)   getVideoPlayTime(file, fileList) {    let self = this    //獲取錄音時(shí)長(zhǎng)    try {     let url = URL.createObjectURL(file.raw);     //經(jīng)測(cè)試，發(fā)現(xiàn)audio也可獲取視頻的時(shí)長(zhǎng)     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)    }   },   //校驗(yàn)上傳文件大小   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: '上傳文件不能不超過(guò)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)   },   //上傳服務(wù)器數(shù)據(jù)格式化   getUploadMusicList() {    let musicList = []    for (let file of this.fileList) {     if (file.response && file.response.key) {      musicList.push({       "play_time": file.duration, //播放時(shí)長(zhǎng)       "size": file.size/1024,   //文件大小 單位 kb       "song_name": file.name,   //歌曲名       "voice_url": "xxxx"     //上傳七牛返回的訪問路徑      })     }    }    return musicList   },   //上傳至服務(wù)器   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: '上傳服務(wù)器成功',       type: 'success'      })     } else{      this.$message({       message: '上傳服務(wù)器失敗，請(qǐng)重試',       type: 'error'      })     }    }).catch(err => {     this.$message({      message: '上傳服務(wù)器失敗，請(qǐng)重試',      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">上傳到服務(wù)器</el-button>   <div slot="tip" class="el-upload__tip">只能上傳mp3文件，且單次不超過(guò)500M</div>  </el-upload></div>export default {  name: 'uploadMusic',  data() {   return {    fileType:'video',    fileData: new FormData(),    headers:{},   }  },

<template> <div>  <el-upload   action="http://127.0.0.1:8000/api/UploadFile/"   list-type="picture-card"   :auto-upload="false"   :on-change="OnChange"   :on-remove="OnRemove"   :on-preview="handlePictureCardPreview"   :before-remove="beforeRemove"   >   <i class="el-icon-plus"></i>  </el-upload>  <el-dialog :visible.sync="dialogVisible">   <img width="100%" :src="dialogImageUrl" alt="">  </el-dialog>  <el-button type="" @click="fun">點(diǎn)擊查看filelist</el-button>  <el-button type="" @click="onSubmit">提交</el-button> </div></template> <script>import {host,batchTagInfo} from '../../api/api'export default {  data() {   return {    param: new FormData(),    form:{},    count:0,    fileList:[],    dialogVisible:false,    dialogImageUrl:''   };  },  methods: {   handlePictureCardPreview(file) {    this.dialogImageUrl = file.url;    this.dialogVisible = true;   },   beforeRemove(file, fileList) {    return this.$confirm(`確定移除 ${ file.name }？`);   },   OnChange(file,fileList){    this.fileList=fileList    },   OnRemove(file,fileList){    this.fileList=fileList   },   //阻止upload的自己上傳，進(jìn)行再操作   // beforeupload(file) {   //   console.log('-------------------------')   //   console.log(file);   //   //創(chuàng)建臨時(shí)的路徑來(lái)展示圖片   //   //重新寫一個(gè)表單上傳的方法   //   this.param = new FormData();   //   this.param.append('file[]', file, file.name);   //   this.form={   //    a:1,   //    b:2,   //    c:3   //   }   //   // this.param.append('file[]', file, file.name);   //   this.param.append('form',form)   //   return true;   // },   fun(){    console.log('------------------------')    console.log(this.fileList)   },   onSubmit(){     this.form={      a:1,      b:2,      c:3     }     let file=''    for(let x in this.form){      this.param.append(x,this.form[x])    }    for(let i=0;i<this.fileList.length;i++){     file='file'+this.count     this.count++     this.param.append(file,this.fileList[i].raw)    }    batchTagInfo(this.param)      .then(res=>{      alert(res)     })   }  } }</script><style> </style>