前端基于element组件的语音文件上传

原理

项目采用的是element组件的UI库，基于标签，实现基本的文件上传功能，并基于标签内置的触发事件，实现了对语音文件大小，格式，上传前确认，上传后显示已上传的文件等功能。
代码
html部分

  <el-upload
        class="upload-demo"
        ref="upload"
        action=""
        :limit="100"
        multiple
        :before-upload="beforeUpload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :file-list="fileList"
        :on-exceed="handleExceed"
        :on-error="handleError"
        :on-success="handleSuccess"
        :auto-upload="false"
        :http-request="handlePost"
        accept="audio/mpeg,image/jpeg,image/gif,image/png,audio/ogg,audio/*">
        <el-button  slot="trigger" size="mini" type="primary">选取文件</el-button>
        &thinsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;
        <el-button type="success"  @click="submitUpload">上传<i class="el-icon-upload el-icon--right"></i></el-button>
        <div slot="tip" class="el-upload__tip">只能上传wav语音文件，且不超过10MB</div>
      </el-upload> 

以上可添加了对语音文件控制的钩子，包括数目限制，移除文件前的回调，上传失败的回调，上传成功的回调等等。这里 将:http-request设置为"handlePost"，可以实现手动自定义上传文件。

javascript部分

//文件上传函数
handlePost(file) {
   if(this.selectedData.length==0) {
       this.$message('请选择一条数据上传');
       return
   }else if(this.selectedData.length>1) {
       this.$message('不支持批量上传');
       return
   };
   let fileFormData = new FormData();
   fileFormData.append('audio', this.files1);
   let requestConfig = {
      headers: {
      'Content-Type': 'multipart/form-data'
      },
   }
   this.$http.post('xxx后台接口', fileFormData,requestConfig).then((res) => {
     file.onSuccess();
     if (res.data ) {
        this.$message({
	        message: '操作成功',
	        type: 'success',
        })
      } 
      }).catch((error) =>{
         	this.$message.error('上传失败');
         	file.onError();
         })
 },

网页页面显示效果