vue中使用el-upload上传图片限制图片格式和大小
<el-upload:show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload":data="uploadToken"class="avatar-uploader"accept=".jpg,.jpeg,.png".
·
<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!');
}
更多推荐
已为社区贡献1条内容
所有评论(0)