Vue上传多种图片格式

会游泳的海绵

于 2019-10-22 10:13:15 发布

阅读量1.6k

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/JavaDigrave/article/details/102677291

版权

Vue 专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了如何在Vue中实现上传图片功能，并且详细说明了如何限制上传文件的类型为JPEG、GIF、PNG和BMP，同时确保图片大小不超过2MB。通过before-upload钩子函数进行文件类型的检查，对不符合条件的文件给出错误提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-upload class="upload-demo" :multiple="true" :action="action" accept="image/jpeg,image/gif,image/png,image/bmp" :file-list="fileList" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">

beforeAvatarUpload(file) {

this.imageFileName.push(file.name);
const isJPG = file.type === 'image/jpeg';
const isGIF = file.type === 'image/gif';
const isPNG = file.type === 'image/png';
const isBMP = file.type === 'image/bmp';
const isLt2M = file.size / 1024 / 1024 < 2;

if (!isJPG && !isGIF && !isPNG && !isBMP) {
this.common.errorTip('上传图片必须是JPG/GIF/PNG/BMP 格式!');
}
if (!isLt2M) {
this.common.errorTip('上传图片大小不能超过 2MB!');
}
return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
},