简单的上传注册图片,将图片转换为beat64格式 存储在后端的数据库中 ,便于访问.

页面
这里直接调用了 element-ui中的上传组件,其中imageUrl用于存储图片的信息
action 不给地址 先不直接上传
<el-form-item label="头像">
<el-upload class="avatar-uploader" action="none" :show-file-list="false" :on-change="onChange">
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>

方法
这里用 onChange file是上传到文件信息,fileList是文件列表
this.ruleForm.image是直接上传数据库的数据

onChange(file, fileList) {
fileList = [] // 清空列表
var reader = new FileReader()
reader.readAsDataURL(file.raw)
reader.onload = () => {
console.log('file 转 base64结果：' + reader.result)
this.ruleForm.image = reader.result
}
reader.onerror = function (error) {
console.log('Error: ', error)
}
this.imageUrl = URL.createObjectURL(file.raw)
},