element-ui的el-upload自定义上传头像

最新推荐文章于 2025-04-02 20:40:08 发布
行走的小海豚
最新推荐文章于 2025-04-02 20:40:08 发布
阅读量8.2k
点赞数 5
文章标签： vue.js
本文链接：https://blog.csdn.net/shenzhishijian/article/details/120298519
版权
效果图

使用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>