页面展示
二、过程
1.进行页面渲染 这里用到了element组件库 修改名称和个人简介直接用v-model双向数据绑定就可以
div class edit
div class edit-item
span class label 修改头像 /span
upload-img
imgMaxWidth 210
action /api/upload?type user
:imageUrl avatar
res-url (data) {avatar data.resImgUrl}
/upload-img
/div
div class edit-item
span class label 修改名称 /span
div
el-input v-model name class create-input placeholder 请输入内容 /el-input
/div
/div
div class edit-item
span class label 个人简介 /span
div
el-input v-model sign type textarea class create-input placeholder 请输入内容 /el-input
/div
/div
div
el-button
class send
type primary
size medium
click save
保存 /el-button
/div
/div
因为上传图片 在别的地方也会用到 所以创建了一个单独的组件upload-img 这里使用的是element组件
el-upload class avatar-uploader :action action :show-file-list false :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 /el-upload
通过props获取父组件传递的参数 这里用的是对象
props:{
action:String,
maxSize:{
type:Number,
default:2
imageUrl:{
type:String,
default:
imgMaxWidth:{
type:[Number,String],
default: auto
},
图片上传在upload-img组件里触发handleAvatarSuccess 图片上传之后 和beforeAvatarUpload 图片上传 两个element的参数 来进行判断是否符合条件 上传之后调用父组件edit的‘gai’方法 让图片显示
// 图片上传之后
handleAvatarSuccess(res, file) {
console.log(res,file);
if(res.code 1){
this.$message({
message:res.mes,
type: warning
return
this.$emit( gai ,URL.createObjectURL(file.raw))
console.log(this.imageUrl);
this.$emit( res-url ,{
resImgUrl:res.data.url
// 图片上传之前
beforeAvatarUpload(file) {
限制图片类型
const isJPG file.type image/jpeg
// 限制图的内存大小
const isLt2M file.size / 1024 / 1024
if (!isJPG) {
this.$message.error( 上传头像图片只能是 JPG 格式!
if (!isLt2M) {
this.$message.error( 上传头像图片大小不能超过 2MB!
console.log(file);
return isJPG isLt2M;
}
总结
到这里编辑个人资料就结束了 谢谢观看
