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:{},
   }
  },

<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">点击查看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的自己上传，进行再操作
   // beforeupload(file) {
   //   console.log('-------------------------')
   //   console.log(file);
   //   //创建临时的路径来展示图片
   //   //重新写一个表单上传的方法
   //   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>