步骤:
定义上传组件:
<el-col :lg="6">
<el-upload
class="avatar-uploader"
action="#"
:auto-upload="false"
:show-file-list="false"
:on-change="changePictureUploadIDFront">
<img v-if="imageUrlFront" :src="imageUrlFront" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
<div class="el-upload__tip">身份证正面</div>
</el-col>
data() {
retrun {
imageUrlFront: ''
}
}
定义方法:
// 文件发生变化时
changePictureUploadIDFront(file, fileList) {
console.log(`------`, file)
const isJPG = file.raw.type === 'image/jpeg'
const isPNG = file.raw.type === 'image/png'
const isLt2M = file.raw.size / 1024 / 1024 < 2
if (file.raw) {
if (isJPG || isPNG) {
const fileFormData = new FormData()
fileFormData.append('files', file.raw)
addIdCard(fileFormData).then(res => { //调用上传接口
if (res) {
this.imageUrlFront = URL.createObjectURL(file.raw)//接口调用成功后赋值src
this.$message({
message: '恭喜你,上传成功!',
type: 'success'
})
}
})
this.imageUrlFront = URL.createObjectURL(file.raw)
} else {
this.$message.error('上传图片只能是 JPG或PNG 格式!')
}
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!')
}
// 返回图是jpg或png格式并且大小不超过2MB
return (isJPG || isPNG) && isLt2M
}
注:方法步骤一目了然,懂得自然懂。
看效果: