uploadAudio.vue

<template>
<div>
  <!-- {{fileList}} -->
  <el-upload
    ref="upload"
    accept=".mp3,.aac,.wma,.rm,.flac,.ogg,"
    :multiple="true"
    :http-request="uploadFile"
    :file-list="fileList"
    action
    :auto-upload="false"
    :before-upload="beforeAvatarUpload"
    :on-remove="handleRemove"
  >
    <i class="el-icon-plus fileUpload"></i>

  </el-upload>
   <el-button style="margin-left: 10px;" size="small" type="success" v-loading="loading" @click="submitUpload">上传到服务器</el-button>
</div>

</template>

<script>
export default {
  props:{
    fileList:{
      type:Array,
      default:[]
    },
  },
  data() {
    return {
      fullscreenLoading: false,
      loading:false,
      filedata: [],
      fileArr: [],
    };
  },
  mounted(){
    // console.log("uploadAudio",this.fileList)
  },
  methods: {
     handleRemove(file, fileList) {
        // console.log(fileList,fileList.map(item=>item.id),'1111')
        // return this.$confirm(`确定移除 ${ file.name }？`);
        this.$emit('audioList',fileList.map(item=>item.id))
      },
    submitUpload() {
       const loading = this.$loading({
          lock: true,
          text: '上传中，请稍候。。。',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      // this.loading = true
        this.filedata = new FormData()  //  用FormData存放上传文件
        this.$refs.upload.submit()  // 会循环调用uploadFile方法，多个文件调用多次
        let _this = this;
      _this
        .$https(
          {
            method: "post",
            url: "file/audio/upload",
            authType: this.backToken
          },
          this.filedata
        )
        .then(res => {
          let resData = res.data;
          console.log(res)
           loading.close();
          //  this.loading = false
          if (resData.resultCode == "200") {
            _this.$message.success('上传成功！')
            const data = resData.data.fileList
            let newArray = data.map((item) => item.id)
            let editArray =[]
            if(this.fileList.length){
              editArray = this.fileList.map(item=>item.id)
            }
            this.$emit('audioList', [...newArray,...editArray])
          } else {
            _this.$message.error(resData.msg || resData.message);
          }
        })
        .catch(err => {
          console.log(err);
          _this.$message.error(err.msg || err.message);
        });


    },
    uploadFile(file) {
         this.filedata.append('file', file.file)
    },
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 / 1024 < 1;
      if (!isLt5M) {
        this.$message.error("上传文件大小不能超过 1GB!");
      }
      return isLt5M;

      //  var testmsg = file.name.substring(file.name.lastIndexOf('.')+1)
      //    const extension = (testmsg === 'mp3')||(testmsg === 'aac')||(testmsg === 'wma')||(testmsg === 'rm')||(testmsg === 'flac')||(testmsg === 'ogg')
      //    if(!extension){
      //      this.$message({
      //        message:"上传文件只能是mp3，aac,wma,rm,flac,ogg,格式！",
      //        type:'error'
      //      })
      //    }
      //    return extension;

    }
  }
};
</script>

<style>
.el-upload .fileUpload {
  width: 148px;
  height: 148px;
  line-height: 148px!important;
  margin: 0 auto;
  border: 1px dashed #c0ccda;
  font-size: 24px;
  font: #ccc;
}
</style>