vue实现文件上传功能

某视频剪辑软件文件上传，供大家参考，具体内容如下

首先先说一下想要实现的效果

就如截图所见，需要将企业和需要上传的文件提交到后台处理，那么接下来就说如何实现

某视频剪辑软件实现

某视频剪辑软件页面代码

El-upload class=' upload-demo ' ref=' upload ' action=' doUpload ' : limit=' 1 ' : file-list=' fileList ' : before-upload=' before upload ' El-button slot=' trigger ' size=' small ' type=' primary '选取文件/el-button a href=' ./static/moban。xlsx ' rel='外部无跟随' download='模板El-button size=' small ' type=' success '下载模板/el按钮/a！-El-button style=' margin-left : 10px；size=' small ' type=' success ' @ click=' submit upload '上传到服务器/El-button-div slot=' tip ' class=' El-upload _ _ tip '只能上传超过文件，且不超过5MB/分区插槽=' tip ' class=' El-upload-list _ _ item-name“{ fileName } }/div/El-upload span插槽='页脚'类='对话框-页脚' El-button @ click='可见=false '取消/el按钮el按钮类型='primary' @click='submitUpload()'确定/el-button /span上传之前的大小校验

在上载（文件){调试器控制台。日志(文件)之前，文件');this.files=fileconst扩展名=file.name.split('。)[1]===' xls '常量扩展名2=文件。名字。拆分('。)[1]===' xlsx ' const isLt2M=file。size/1024/1024 5 if(！分机！分机2) {这个$message.warning('上传模板只能是xls、xlsx格式！)返回} if(！isLt2M){ 0这个$message.warning('上传模板大小不能超过“5MB！”)返回}这个。文件名=文件。姓名；返回false //返回错误的不会自动上传},手动上传确认提交

submit upload(){ 0调试器控制台。日志('上传这个。文件。名称)如果(这个。文件名==' '){这个.$message.warning('请选择要上传的文件！)返回false }让fileFormData=new FormData()；fileFormData.append('file '，this.files，this。文件名)；//文件名是键，文件是值，就是要传的文件，test.zip是要传的文件名让请求配置={标头RS : { '内容类型' : '多部分/表单数据' }，对此$ http。post(`/基础数据/oes成员/上传？companyId=` this.company，fileFormData，requestConfig).然后((RES)={ 0调试器if (data data.code===0) { this .$message({ message: '操作成功，键入：“成功”，duration: 1500，onclose :()={ this。可见=假这个.$ emit(' RefreshDataList ')} })else { this .$message.error(data.msg) } }) }后台

/** * 上传文件*/@发布映射('/upload ')@必需的会话(' base data : oes members : upload ')公共r上传(@RequestParam('文件')多部分文件，@RequestParam('companyId ')整数公司id){系统。出去。println(公司id)；if(file . isempty()){ 0抛出新的异常('上传文件不能为空');} //上传文件相关逻辑返回r . ok()；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。