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

原理

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

  <el-uploadclass="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();})},

网页页面显示效果

前端基于element组件的语音文件上传相关推荐

基于华为云obs实现文件上传下载（技术栈mysql+springboot+Maven+jsp+java）的技术分享
基于华为云obs实现文件上传下载(技术栈mysql+springboot+jsp+java)的技术分享 obs实现文件上传下载前言一.OBS是什么? 二.使用步骤 1.1 前期准备 2 工具的内容 ...
基于fastDFS和elementUI的文件上传（只要后端有数据，一通百通。）
基于elementUI和fastDFS的文件上传只要数据传到后端,啥都好说,进不去白瞎,所以不管是fastDFS还是别的,一通百通(只是时间问题) 准备 <dependency>< ...
使用饿了么update组件实现多文件上传到后台以及本地图片显示功能
使用饿了么update组件实现多文件上传到后台以及本地图片显示功能查了很多博客,终于弄出来了.我就大概说一下.我的业务内容是要把一个表单统一上传上去,而且其中有字段也有图片. <div cl ...
学习日志day41（2021-09-03）（1、文件的上传 2、文件的查看 3、文件的下载 4、使用工具类上传文件 5、基于servlet3.0以上的文件上传）
学习内容:学习JavaWeb(Day41) 1.文件的上传 2.文件的查看 3.文件的下载 4.使用工具类上传文件 5.基于servlet3.0以上的文件上传 1.文件的上传 (1)实现文件的上传需要 ...
el-upload 组件在 on-success 文件上传成功的钩子中传递更多参数
el-upload 组件在 on-success 文件上传成功的钩子中传递更多参数 <el-table-columnlabel="附件"align="center& ...
基于阿里云的OSS文件上传和下载
OSS概述 OSS是基于阿里云的一个云平台文件保存的系统,我们可以将服务器的文件上传至云端从而减轻服务器的压力. 初体验首先创建一个bucket (给你的云储存器配置名字等基本信息) 生成Asses ...
Flash上传组件之SWFUpload文件上传
2019独角兽企业重金招聘Python工程师标准>>> 一.什么是SWFUpload? SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合F ...
java swf 上传文件_Flash上传组件之SWFUpload文件上传
SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式. 由 ...
[C# 网络编程系列]专题十一：实现一个基于FTP协议的程序——文件上传下载器...
引言: 在这个专题将为大家揭开下FTP这个协议的面纱,其实学习知识和生活中的例子都是很相通的,就拿这个专题来说,要了解FTP协议然后根据FTP协议实现一个文件下载器,就和和追MM是差不多的过程的,相信 ...

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

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

前端基于element组件的语音文件上传相关推荐

最新文章

热门文章