#vue#element-ui文件上传（格式校验）

在我们使用element-ui的上传组件时，

必不可少的一步就是进行上传类型的格式校验，

本文列举了几种常见的上传类型格式：图片、ppt、视频、文档等

上传组件https://element.eleme.cn/#/zh-CN/component/upload

 <el-uploadclass="avatar-uploader":headers="{Authorization:token}":action="uploadUrl":show-file-list="false":before-upload="headUpload":on-success="function(res,file){return handleAvatarSuccess(res,file,index);} "></el-upload>

在method里面，写入校验方法

若需要限制上传文件的大小，那就需要写个新的变量进行赋值

示例：

const isLt2M = file.size / 1024 /1024 <2;
（设置上传文件的大小）

再进行判断，当上传文件超过我们设置好的大小时，就会弹出警告语

if (!isLt2M) {this.$message.err('上传的图片大小不能超过2MB!')return false;
}

然后我们需要再判断上传文件的格式

使用indexOf(file.type)来进行判断，这个方法是判断我们上传的文件格式有没有在我们设置好的的文件类型里面，如果 == -1 ，就代表没有，就会弹出警告语

if (['application/vnd.ms-powerpoint'].indexOf(file.type) == -1) {this.$message.error('请上传正确的ppt格式');return false;}

（注：return false;就是指当上传的文件格式错误时，就不会进行下一步操作）

图片：
.jpeg格式：image/jpeg
.png格式： image/png
.gif格式： image/gif

音频：
.mp3格式：audio/mpeg

视频：
.mp4格式：video/mp4
.m3u8格式：application/x-mpegURL
.mov格式：video/x-ms-wmv
.avi格式：video/x-msvideo
.flv格式：video/x-flv
.wmv格式：video/x-ms-wmv

文本：
.xls格式：application/vnd.ms-excel
.xlsx格式：application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.doc格式：application/msword
.docx格式：application/vnd.openxmlformats-officedocument.wordprocessingml.document
.txt格式：text/plain
.pdf格式：application/pdf
.ppt格式：application/vnd.ms-powerpoint
.zip格式：application/zip
.rar格式：application/x-rar

代码示例：

 <div class="item-name" >上传头像</div><el-uploadclass="avatar-uploader":headers="{Authorization:token}":action="uploadUrl":show-file-list="false":before-upload="headUpload":on-success="function(res,file){return handleAvatarSuccess(res,file,index);} "><img v-if="item.headPortraitUrl" :src="item.headPortraitUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>

 <div class="upload-item"><el-upload:headers="{Authorization:token}":action="uploadUrl":on-success="handleSuccess1":show-file-list="true":before-upload="pptUpload"multiple><div><div class="item-meg">路演PPT<img v-if="form.accessoryMessagelist[0].url" src="/static/header/11.png" alt="" class="upload-icon" ><div v-if="form.accessoryMessagelist[0].url" class="upload-next">重新上传</div><div v-else class="upload">点击上传</div></div></div>
</el-upload><el-upload:headers="{Authorization:token}":action="uploadUrl":on-success="handleSuccess2":show-file-list="true":before-upload="doxrUpload"><div><div class="item-meg">商业企划书<img v-if="form.accessoryMessagelist[1].url" src="/static/header/11.png" alt="" class="upload-icon" ><div v-if="form.accessoryMessagelist[1].url" class="upload-next">重新上传</div><div v-else class="upload">点击上传</div></div></div>
</el-upload><el-upload:headers="{Authorization:token}":action="uploadUrl":on-success="handleSuccess3":show-file-list="true":before-upload="videoUpload"><div><div class="item-meg">宣传视频<img v-if="form.accessoryMessagelist[2].url" src="/static/header/11.png" alt="" class="upload-icon" ><div v-if="form.accessoryMessagelist[2].url" class="upload-next">重新上传</div><div v-else class="upload">点击上传</div></div>
</div>
</el-upload><el-upload:headers="{Authorization:token}":action="uploadUrl":on-success="handleSuccess4":show-file-list="true"><div><div class="item-meg">其他附件<img v-if="form.accessoryMessagelist[3].url" src="/static/header/11.png" alt="" class="upload-icon" ><div v-if="form.accessoryMessagelist[3].url" class="upload-next">重新上传</div><div v-else class="upload">点击上传</div></div>
</div>
</el-upload>
</div>

 //校验版块//校验---{上传成员头像}前图片格式及大小AvatarUpload(file) {const isJPG = file.type === 'image/jpeg';const isLt2M = file.size / 1024 / 1024 < 2;if(['image/jpeg','image/PNG'].indexOf(File.type) == -1) {this.$message.error('上传头像图片只能是 JPG/PNG 格式!');return false;}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');}return isJPG && isLt2M; },//校验---{上传视频}前进行格式校验videoUpload(file) {const isLt50M = file.size / 1024 / 1024  < 50;if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {this.$message.error('请上传正确的视频格式');return false;}if (!isLt50M) {this.$message.error('上传视频大小不能超过50MB哦!');return false;}},//校验---{上传ppt}前进行格式校验pptUpload(file) {if (['application/vnd.ms-powerpoint'].indexOf(file.type) == -1) {this.$message.error('请上传正确的ppt格式');return false;}  },//校验---{上传商业企划书}前进行格式校验doxrUpload(file) {if (['application/vnd.ms-powerpoint', 'application/msword','application/vnd.openxmlformats-officedocument.wordprocessingml.document','application/pdf' ].indexOf(file.type) == -1) {this.$message.error('请上传正确类型的文件格式');return false;} },

#vue#element-ui文件上传（格式校验）相关推荐

element ui 文件上传限制文件类型
问题描述: 限制文件的上传类型,在change事件或者是成功的回调函数中,做限判断会触发事件冒泡,并且无法删除页面上的展示列表中的文件解决方案: 在用户选择文件的时候就只能选择对应文件的类型实现方 ...
Vue element ui + AmazonS3上传文件功能
一.在上传之前,需要先获取到AWS的S3服务的Access key ID和Secret access key 二.代码代码: <template><div class="u ...
element ui视频上传（已上线，拿去即用）
element ui视频上传 + 进度条实现(拿去即用) 1.template 部分 2. script 部分 3. scss 部分 1.template 部分 <template>< ...
vue上传zip文件到服务器,vue.js zip文件上传
vue.js zip文件上传内容精选换一换开发过程中,您有任何问题可以在github上提交issue,或者在华为云对象存储服务论坛中发帖求助.接口参考文档详细介绍了每个接口的参数和使用方法.在O ...
vue自定义组件-文件上传后端接口
学习目标: vue自定义组件-文件上传后端接口学习内容: 准备工作: 后端环境:JAVA-Springboot项目数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息 ...
vue+element实现图片上传及裁剪功能（vue-cropper）
需求背景: 上传图片或者头像时,能够将图片进行裁剪(等比例缩放裁剪或非等比例裁剪) 效果图: 安装使用 1.安装 npm install vue-cropper // npm 安装 yarn add ...
vue采用 XLSX文件上传与下载
vue采用 XLSX文件上传与下载先安装xlsx npm install xlsx 安装之后直接在该页面script标签里面导入 import * as XLSX from 'xlsx' 注意此处 ...
文件上传 java 完美,vue+java实现文件上传（excel等），会出现跨域问题，直接用form表单提交就不会有问题了（new FormData()）...
vue+java实现文件上传(excel等),会出现跨域问题,直接用form表单提交就不会有问题了(new FormData()) 地址:https://www.cnblogs.com/muscles ...
vue2 - 基于Element UI实现上传Excel表单数据功能
一.项目场景批量数据上传后台,需要从后台下载一个固定格式的 Excel表格,然后在表格里面添加数据,将数据格式化,再上传给后台,后台做解析处理,往数据库添加数据二.实现功能展示点击导入excel ...
SpringBoot+Vue+ElementUI实现文件上传与文件下载
作者: Memory(星哥) Wechat:/QQ: 574373426 整理不易,感谢支持,欢迎收藏转发分享专注IT职业教育多年,学编程找星哥 SpringBoot+Vue+ElementU ...

#vue#element-ui文件上传（格式校验）

#vue#element-ui文件上传（格式校验）相关推荐

最新文章

热门文章