vue中使用el-upload上傳圖片限制圖片格式和大小
<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