博客来源于项⽬以及编程中遇到的问题总结，偶尔会有读书分享，我会陆续更新Java前端、后台、数据库、项⽬案例等相关知识点总结，感谢你的阅读和关注，希望我的博客能帮助到更多的⼈，分享获取新知，⼤家⼀起进步!
吾等采⽯之⼈，应怀⼤教堂之⼼，愿⼤家奔赴在各⾃的热爱⾥…
⽂章⽬录
⼀、⽂章序⾔
上传组件基础学习可参考：
⽂件上传在⼤部分情况下都需要限制⽂件类型：当然对于前后端来说，前端可以实现筛选⽂件，后台也可以同步实现筛选⽂件，将不符合条件的⽂件筛选掉
对于服务器⽽⾔能在前端筛选掉的就不要留给后台去做没必要给服务器照成没必要的压⼒
之前给整理过 :before-upload="beforeUpload"这个属性，即上传前的回调，限制⽂件类型
<el-upload
class="avatar-uploader"
action="picode/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeUpload">
<img v-if="imageUrl":src="imageUrl"class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
限制⽂件的⼤⼩，限制⽂件的类型都可以在这⾥操作，如果你上传的⽂件不符合条件，此处会给出对应的提⽰消息
beforeUpload(file){
const isJPG = pe ==='image/jpeg';
const isLt2M = file.size /1024/1024<2;
if(!isJPG){
this.$('上传头像图⽚只能是 JPG 格式!');
}
if(!isLt2M){
this.$('上传头像图⽚⼤⼩不能超过 2MB!');
}
return isJPG && isLt2M;
博客上传视频}
}
汉堡加盟店10大品牌本篇重点讲解element给我们提供了accept属性，即在选择⽂件的时候直接进⾏筛选
⼆、属性讲解
我们使⽤element官⽹⽂件上传测试，正常我们点击，此处是所有的⽂件
我们先创建⼀个⽂件上传测试⽂件夹放⼊部分⽂件
同步如果我们想在前端限制⽂件上传的类型可以在:before-upload="beforeAvatarUpload"中绑定对应的校验⽅法但是这样其实还不够简洁和实⽤
element给我们提供了accept属性接受上传的⽂件类型
此处我们加上accept属性来筛选⽂件，看看效果
使⽤accept属性直接在打开⽂件夹的时候就将⽂件进⾏了筛选
常见的⽂档类上传筛选如下，当然你根据你的业务来筛选
accept=".pdf, .doc, .docx, .xls, .xlsx"
更多的筛选请参考
accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
accept属性搭配 :before-upload="beforeUpload"属性使⽤
beforeUpload(file){
const fileSuffix = file.name.substring(file.name.lastIndexOf(".")+1);
const whiteList =["pdf","doc","docx","xls","xlsx"];
if(whiteList.indexOf(fileSuffix)===-1){
this.$('上传⽂件只能是 pdf、doc、docx、xls、xlsx格式');
return false;
}
const isLt2M = file.size /1024/1024<2;
if(!isLt2M){
this.$('上传⽂件⼤⼩不能超过 2MB');
return false;
圆脸剪什么发型好看}
}
如上你需要限制⽂件类型的话还是建议多使⽤accept属性， :before-upload="beforeUpload"更多的只是帮助我们校验或者提⽰，当然你如果想限制⽂件⼤⼩或者限制图⽚的⽐例等可以在此属性⾥⾯新增操作！
三、拓展知识
基于vue-simple-uploader封装⽂件分⽚上传组件限制⽂件的类型
前段时间做的项⽬⽤到分⽚上传，涉及到视频，⾳频，⽂档的上传，也同步涉及到筛选，查阅了相关资料问题也得到解决
分⽚上传组件主要⽤于上传⼤⽂件，相对于传统的问题上传效率更⾼，速度更快
分⽚上传组件常常绑定⼀个属性，属性⾥⾯的accept如下写可以分别限制，图⽚，视频，⾳频的上传，在选择⽂件的时候直接筛选出对应的⽂件
picTypeFile:{ accept:'image/*'}
videoTypeFile:{ accept:'video/*'}
audioTypeFile:{ accept:'audio/*'}
具体的使⽤⼤家根据⾃⼰当前的组件对应的属性⽂档去尝试！
全国十大卫浴品牌⽂件上传此版块，我也有很多的不⾜，后续我会陆续更新更多基础⽂章，欢迎学习交流分享，⼀起进步！
⾮常感谢你阅读到这⾥，如果这篇⽂章对你有帮助，希望能留下你的点赞 关注❤ 分享 留⾔ thanks
2021年5⽉30⽇10:44:31 愿你们奔赴在⾃⼰的热爱⾥！
发布评论