一、使用element-ui中的upload组件
<el-row>
<el-col :span="24" :offset="2">
// 文件上传组件
<el-form-item label="用户头像">
<el-upload
ref="updload_avatar" // ref 用于refs 定位当前元素
action="" // 提交的后台地址,因为使用base64 所以不写后台地址,但是该参数为必须的,不能删除
list-type="picture-card" // 设置文件选择样式
class="avatar-uploader" // class 名称 可以不要
:auto-upload="false" // 是否自动上传
:limit="1" // 限制只能选择一张图片
:on-change="getFile" // 当图片改变时触发
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
// 图片展示
<img v-if="userInfo.accountImg" ref="img" class="avatar-img" :src="userInfo.accountImg">
</el-form-item>
</el-col>
</el-row>
二、定义data
data() {
return {
userInfo: {}
}
}
三、编写方法
// 用于获取base64字符
getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
let imgResult = ''
reader.readAsDataURL(file)
reader.onload = function() {
imgResult = reader.result
}
reader.onerror = function(error) {
reject(error)
}
reader.onloadend = function() {
resolve(imgResult)
}
})
},
// 文件校验
verifyFile(file) {
return new Promise((resolve, reject) => {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
reject('上传头像图片只能是 [jpg, png, gif] 格式!')
}
if (!isLt2M) {
reject('上传头像图片大小不能超过 2MB!')
}
resolve(isJPG && isLt2M)
})
},
// upload组件触发改变的事件
getFile(file, fileList) {
// 清除上一次选择的文件 避免后面不在触发此事件
this.$refs['updload_avatar'].clearFiles()
// 文件格式及大小校验、获取base64
this.verifyFile(file.raw).then(resp => {
return this.getBase64(file.raw)
}).then(resp => {
// 这里强调一下为什么是使用这种方式而不是使用
// this.userInfo.accountImg = resp
// 因为vue 数据监测不到对象深处的数据更改,所以需要使用$set通知一下vue
// 不这样写会导致页面中的图片展示不生效
this.$set(this.userInfo, 'accountImg', resp)
}).catch(err => {
this.$message(err)
})
}
四、效果展示
base上传演示