效果图
使用element-ui的el-upload自定义上传头像:我实现这个效果的操作是,点击方框就会从本地上传一张图片,直接通过:http-request="upLoad"调用后台的接口将图片保存在服务器上,因为我这里实际上是在修改时写的代码,我进行的操作是拿到上面上传到服务器的图片地址,再调用修改接口完成图片的更换功能。(这是一个反复的过程)
代码部分:
代码片
<template>
<div class="personal">
<el-dialog title="修改个人信息" :visible.sync="dialogShow.dialogVisible" width="50%" :modal-append-to-body="false">
<el-form ref="userInfoForm" :rules="userFormRules" :model="userInfoForm" class="user-form" label-width="100px">
<el-form-item label="头像:" prop="avatar">
<el-upload
:action="interfaceUrl"
:headers="headers"
:http-request="upLoad"
:show-file-list="false"
class="avatar-uploader"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
name="file"
:file-list="fileList"
>
<img v-if="userInfoForm.avatar" :src="userInfoForm.avatar" :v-model="userInfoForm.avatar" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item prop="nickName" label="昵 称:">
<el-input v-model="userInfoForm.nickName" placeholder="请修改昵称">
</el-input>
</el-form-item>
<el-form-item prop="sex" label="性 别:">
<!-- <el-input v-model="userInfoForm.sex" placeholder="请修改性别1表示男0表示女">
</el-input> -->
<!-- <template> -->
<el-radio v-model="userInfoForm.sex" :label="1">男</el-radio>
<el-radio v-model="userInfoForm.sex" :label="0">女</el-radio>
<!-- </template> -->
</el-form-item>
<el-form-item prop="userName" label="用 户 名:">
<el-input v-model="userInfoForm.userName" placeholder="请修改用户名">
</el-input>
</el-form-item>
<el-form-item prop="realName" label="真实姓名:">
<el-input v-model="userInfoForm.realName" placeholder="请修改真实姓名">
</el-input>
</el-form-item>
<el-form-item prop="idCardNo" label="身份证号:">
<el-input v-model="userInfoForm.idCardNo" placeholder="请修改身份证号">
</el-input>
</el-form-item>
<el-form-item prop="remark" label="个性签名:">
<el-input v-model="userInfoForm.remark" placeholder="请修改个性签名" type="textarea" style="width:60%;">
</el-input>
</el-form-item>
<el-form-item prop="mobilePhone" label="手机号码:">
<el-input v-model="userInfoForm.mobilePhone" placeholder="手机号">
<template slot="prepend">
<span class="el-icon-mobile prep-icon-span"></span>
</template>
<template slot="append">
<el-button @click="countDown()">{{ content }}</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item prop="code" label="验 证 码:">
<el-input v-model="userInfoForm.code" placeholder="验证码">
<template slot="prepend">
<span class="el-icon-view prep-icon-span"></span>
</template>
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancelModify">取 消</el-button>
<el-button type="primary" @click="submitModify">修改</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {getToken} from '@/utils/auth'
import {baseMixin} from "@/store/app-mixin"
import {changeUserInfo} from '@/views/learn/services/personalcenter'
import {receiveVerificationCode} from '@/views/learn/services/personalcenter'
import {uploadImage} from '@/views/learn/services/personalcenter'
export default {
props: ['dialogShow', 'userInfo'],
mixins: [baseMixin],
data() {
var checkIdcard = (code) =>{
var city = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江 ", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北 ", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏 ", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外 " };
var tip = "";
var pass = true;
if (!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)) {
tip = "身份证号格式错误";
return false
}
if (!city[code.substr(0, 2)]) {
tip = "地址编码错误";
pass = false;
}
if (code.length == 18) {
var sBirthday = code.substr(6, 4) + "-" + Number(code.substr(10, 2)) + "-" + Number(code.substr(12, 2));
var d = new Date(sBirthday.replace(/-/g, "/"))
if (sBirthday != (d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate())) {
//alert("非法生日");
return false
}
}
//18位身份证需要验证最后一位校验位
if (code.length == 18) {
code = code.split('');
//∑(ai×Wi)(mod 11)
//加权因子
var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
//校验位
var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
var sum = 0;
var ai = 0;
var wi = 0;
for (var i = 0; i < 17; i++) {
ai = code[i];
wi = factor[i];
sum += ai * wi;
}
var last = parity[sum % 11];
if (parity[sum % 11] != code[17]) {
tip = "校验位错误";
return false;
}
}
return true;
}
var validatePhone = (rule, value, callback) => {
var myreg = /^[1][2,3,4,5,7,8,9][0-9]{9}$/
if (value === '') {
callback(new Error('手机号不能为空'))
} else if ( !myreg.test(value) ) {
callback(new Error('手机号码格式不正确'))
} else {
callback()
}
}
var validateIdCard = (rule, value, callback) => {
if( value == '') {
callback(new Error("身份证不能为空"))
}else if(!checkIdcard(value)){
callback(new Error('身份证格式验证不正确'))
}else{
callback();
}
}
return {
userInfoForm: {
avatar: this.userInfo.avatar,
email: this.userInfo.email,
idCardNo: this.userInfo.idCardNo,//身份证号
mobilePhone: this.userInfo.mobilePhone,
nickName: this.userInfo.nickName,//用户昵称
realName: this.userInfo.realName,//真实姓名
remark: this.userInfo.remark,//说明
sex: this.userInfo.sex,//1男,0女
userName: this.userInfo.userName,//用户名
code: ''
},
content: "发送验证码",
totalTime: 60,
canClick: true,
userFormRules: {
nickName: [
{ required: true, message: "昵称可选填", trigger: "blur" },
{ max: 20, message: "长度在 20 个字符以内", trigger: "change" },
],
userName: [
{ required: true, message: "用户名可选填", trigger: "blur" },
{ max: 20, message: "长度在 20 个字符以内", trigger: "change" },
],
realName: [
{ required: true, message: "真实姓名可选填", trigger: "blur" },
{ max: 150, message: "长度在 150 个字符以内", trigger: "change" },
],
sex: [
{ required: true, message: "性别可选填", trigger: "blur" },
{ max: 1, message: "长度为1", trigger: "change" },
],
remark: [
{ required: true, message: "个性签名可选填", trigger: "blur" },
{ max: 150, message: "长度在 150 个字符以内", trigger: "change" },
],
idCardNo: [
{ required: true, message: "身份证号可选填", trigger: "blur" },
{ validator: validateIdCard, targger: 'blur'}
],
mobilePhone: [
{ validator: validatePhone, trigger: 'blur'},
{ required: true, type: 'number', message: '手机号必须为数字'}
],
code: [
{ required: true, message: "验证码不可为空", trigger: "blur" }
],
},
interfaceUrl: '',//上传后台的接口地址
imageUrl: '',
headers: {
Authorization: getToken()
},
fileList: [], //上传的文件列表
}
},
created() {
this.uploadUrl()
},
methods: {
countDown() {
this.$message.warning('注意:只有修改手机号码时才需要获取验证码!!!')
if (!this.canClick) return //改动的是这两行代码
this.canClick = false
this.handleSend()
this.content = this.totalTime + "s后重新发送"
let clock = window.setInterval(() => {
this.totalTime--
this.content = this.totalTime + "s后重新发送"
if (this.totalTime < 0) {
window.clearInterval(clock)
this.content = "重新发送验证码"
this.totalTime = 60
this.canClick = true //这里重新开启
}
}, 1000)
},
handleSend() {
this.countDown()
receiveVerificationCode({phone: this.userInfoForm.mobilePhone}).then((res) => {
console.log("receiveVerificationCode", res)
if (res.code == "sys.success") {
this.$message.success("发送成功!!!")
}
})
},
submitModify() {
const params = {
userName: this.userInfoForm.userName,
nickName: this.userInfoForm.nickName,
realName: this.userInfoForm.realName,
mobilePhone: this.userInfoForm.mobilePhone,
email: this.userInfoForm.email,
code: this.userInfoForm.code,
avatar: this.userInfoForm.avatar,
sex: this.userInfoForm.sex,
idCardNo: this.userInfoForm.idCardNo
}
// console.log("sex",this.userInfoForm.sex)
changeUserInfo(params).then((res) => {
console.log("submitModify", res)
if (res.code == "sys.success") {
this.$message.success("修改成功!")
// this.$parent.autoFresh()
this.dialogShow.dialogVisible = false
}
}).catch((err) =>{
this.$message.error("系统内部错误,请联系管理员!")
})
},
cancelModify() {
this.dialogShow.dialogVisible = false
},
uploadUrl() {
this.interfaceUrl = this.fileServerUrl()+'system/api/v1/upload'
console.log("interfaceUrl", this.interfaceUrl)
},
upLoad(file) {
console.log("aaaaaaaaaaaaa",file)
const formData = new FormData()//通过form数据格式来传
formData.append("file", file.file) //传文件
console.log("bbbbbbbbbbbbb",formData)
uploadImage(formData).then((res) => {
console.log(res);
console.log('上传成功')
if (res.code === "sys.success") {
this.userInfoForm.avatar = this.fileServerUrl()+ res.data.fileSrc
const previewImage = this.userInfoForm.avatar
console.log("previewImage",previewImage)
} else {
this.$message('头像上传失败')
}
})
},
// 点击更换头像
handleAvatarSuccess(res, file) {
// 这句话就是连接后台服务器的
this.userInfoForm.avatar = URL.createObjectURL(file.raw)
// console.log("kkkkkkkkk111")
console.log("handleAvatarSuccess",this.userInfoForm.avatar)
// console.log("kkkkkkkkk222")
},
beforeAvatarUpload(file) {
const isJPG =file.type == 'image/jpeg' || file.type == 'image/png' || file.type == 'image/gif'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error("上传头像图片只能是 JPG/PNG/GIF 格式!")
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!")
}
return (isJPG || isPNG) && isLt2M
}
}
}
</script>
<style scoped>
.user-form {
}
.el-input {
width: 60%;
}
.avatar-uploader /deep/ .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
background-color: #fff;
cursor: pointer;
position: relative;
overflow: hidden;
width: 180px;
height: 180px;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.showUploader /deep/ .el-upload-list{
display: none;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>