vue中使用elupload上传图片限制图片格式和大小

<el-upload
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:data="uploadToken"
class="avatar-uploader"
accept=".jpg,.jpeg,.png"
action="https://upload.qiniup.com">
<!-- http://up.qiniup.com -->
<img
v-if="form.avatar"
:src="form.avatar"
class="avatar">
<img
v-else
src="~/assets/images/user-logo.png"
class="avatar">
</el-upload>
使用accept，同时要加以格式判断

beforeAvatarUpload(file) {
console.log('file', file)
let types = ['image/jpeg', 'image/jpg', 'image/png'];
const isImage = types.includes(file.type);
if (!isImage) {
this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!');
}else{
this.uploadToken.key=`upload_pic_${Date.parse(new Date())}${file.name}`
}
},
const isLtSize = file.size / 1024 / 1024 < 5;
if (!isLtSize) {
this.$message.error('上传图片大小不能超过 5MB!');
}
————————————————
版权声明：本文为CSDN博主「踏寒」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zh_chong/article/details/106759166