element实现图片上传 --- el-upload
使用elementUI的el-upload组件实现图片上传。
·
使用elementUI的el-upload组件实现图片上传。
效果:
点击选择图片
想要更换图片时,再次点击图片,选择另一张图片,选择图片之后会直接将原来的替换,没有其他多余效果。
实现代码:
html页面:
<el-form-item label="上传图片" required>
<el-upload
class="avatar-uploader"
action="/api/file/upload"
:show-file-list="false"
:data="fileData"
:headers="headers"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<div slot="tip" class="el-upload__tip">建议尺寸:200*100px</div>
</el-upload>
</el-form-item>
参数:
fileData: { // 接口需要的额外参数
category: 12
},
headers: { // 请求头部参数
accessToken: ''
},
方法:
// 图片上传成功的操作
handleAvatarSuccess(res, file) {
if (res.msgCode === 200) {
this.imageUrl = URL.createObjectURL(file.raw)
} else {
this.$message.error(res.msgContent)
}
},
// 图片上传前的判断
beforeAvatarUpload(file) {
let imgType = ['jpg','jpeg','png']
let judge = false // 后缀
let type = file.name.split('.')[file.name.split('.').length - 1]
for (let k = 0; k < imgType.length; k++) {
if (imgType[k].toUpperCase() === type.toUpperCase()) {
judge = true
break
}
}
// 验证图片格式
if (!judge) {
this.$message.error('图片格式只支持:JPG、JPEG、PNG')
return false
}
const isLt1M = file.size / 1024 / 1024
if (isLt1M > 1) {
this.$message.error('上传头像图片大小不能超过1MB')
return false
}
return true
},
更多推荐
已为社区贡献10条内容
所有评论(0)