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

最新推荐文章于 2025-04-02 20:40:08 发布
最新推荐文章于 2025-04-02 20:40:08 发布
阅读量8.2k 收藏 24
点赞数 5
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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>
使用element ui-upload组件上传头像
weixin_44542401的博客
06-01 1884
这个头像上传的问题其实困扰我挺久的，我也查了很多的资料可多数都不是我想要的结果。查到有关的也只是模棱两可。以下是我上传成功的全过程希望对你有帮助 这是element upload官网组件 vue前端 这个是我从官网拷贝过来的（改了一点） <el-upload action="http://localhost:8181/123/123/" :before-upload="beforeAvatarUpload" :on
vue element-ui el-upload文件自定义上传功能
weixin_41033048的博客
02-10 907
HTML代码： <el-upload class="upload-demo" align="center" drag :limit="1" :auto-upload="false" action="" :on-change="handleChangeVideo" :file-list="fileList" > <i class="el-ic
element ui的upload 手动上传头像（复制就能用）
weixin_52563089的博客
12-25 2386
手动上传用户头像 upload
element-plus中，Upload上传组件的使用 + 后端处理
最新发布
qq_63981644的博客
04-02 1426
element-plus中，Upload上传组件的使用 + 后端处理。
使用 element-ui 组件 upload 上传用户头像
死噶的博客
08-30 1182
【代码】使用 element-ui 组件 upload 上传用户头像。
ElementUI组件之头像上传, 并储存在后端服务器
Leonnnn2020的博客
05-07 2105
ElementUI头像上传功能实现
elementUI 上传头像
qq_41417772的博客
09-15 3643
<template> <el-upload class="avatar-uploader" :action= action :headers="myHeaders" :show-file-list="false" :on-success="handleAvatarSuccess" :befor
el-upload实现上传头像
萌萌的博客
01-03 1525
1. <template> <el-upload :action="uploadFileUrl" list-type="picture-card" :on-preview="handlePictureCardPreview" ref="uploadimgs" :on-remove="handleRemove" :class="{hide:iconUploadShow}" :on-cha
element-ui---头像上传
qq_59076775的博客
08-10 1482
上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。是否显示已上传文件列表。必选参数，上传的地址。
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法...
使用element-ui的el-upload实现自定义上传及滚动条功能。
一键写代码的博客
07-14 1522
使用element的el-upload 实现自定义上传功能。
【JavaScript源代码】element-ui中el-upload多文件一次性上传的实现.docx
12-28
在处理文件上传时，Element-UI的`el-upload`组件默认情况下会对每个文件发送单独的上传请求。然而，有时我们需要将多个文件一次性上传，并在同一个请求中发送。下面我们将详细介绍如何使用`el-upload`组件实现这一...
element-ui—— el-upload 自定义上传文件显示列表及固定标签的添加
qq_43201350的博客
05-09 5469
<template> <div> <el-upload class="avatar-uploader" ref="upload" :limit="10" multiple :on-exceed="handleExceed" :show-file-list="false" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handlePreview" :file-l
【Vue3】使用el-upload封装头像上传组件
小安驾到的博客
07-04 754
【代码】【Vue3】使用el-upload封装头像上传组件。
element ui实现el-upload用户头像上传（单图上传）
qq_45061876的博客
02-21 4557
element ui实现el-upload用户头像上传（单图上传）
element-ui 上传头像图片
m0_62134648的博客
05-17 763
地址更改，直接用就ok。
vue【1-1】el-upload 上传头像预览（自定义上传方法）
靠嘴吃饭
07-23 2206
目录 完整代码： 1、表单 2、el-upload 3、 el-dialog 总结 继上篇之后，此处给出完整的表单修改 完整代码： <template> <!-- 个人信息 表单 --> <el-form ref="ruleFormPersonalInfo" :model="ruleFormPersonalInfo" :rules="r...
element-ui upload上传用户头像注意事项
wjfhq的博客
12-04 970
后端使用@RequestParam的注解来对应前端的name="image"，这样就可以把文件存储在对应的磁盘目录里。
el-upload+boot上传头像
weixin_45266846的博客
03-14 2018
具体步骤1.新建gitee图床和后端代码2.前端代码2.1 el-upload组件2.2 methods 因为一直无法实现将图片保存到本地，所以我在gitee上新建了一个图床仓库，把图片文件都传到图床上，保证用户头像的正常回显。 1.新建gitee图床和后端代码 推一个大佬的链接：Springboot实战：实现本地上传图片到Gitee图床(含完整代码) 2.前端代码 经过我将近一天的试错，搞到一种可以成功实现的方法。 2.1 el-upload组件 <el-upload
element-ui upload自定义el-upload-list
06-11
您好，关于 element-ui 的上传组件 el-upload，您可以通过自定义 el-upload-list 来实现自定义上传列表的功能。 具体实现方法如下： 1. 在 el-upload 组件中添加属性 list-type="picture-card"，并设置属性 action 为上传文件的地址。 2. 在 el-upload 组件中添加自定义 slot，用于自定义上传列表的显示。 3. 在自定义的上传列表组件中，使用 el-upload-list 组件来展示上传文件的列表。 4. 可以通过监听 el-upload 组件的 change 事件来获取上传的文件信息，并将上传的文件信息传递给自定义的上传列表组件，以展示上传文件的列表。 以下是一个简单的示例代码： ```html <template> <div> <el-upload class="upload-demo" action="/upload" list-type="picture-card" :on-change="handleChange" > <i class="el-icon-plus"></i> <div class="upload-text">上传图片</div> </el-upload> <custom-upload-list :file-list="fileList"></custom-upload-list> </div> </template> <script> import CustomUploadList from './CustomUploadList.vue'; export default { components: { CustomUploadList, }, data() { return { fileList: [], }; }, methods: { handleChange(file, fileList) { this.fileList = fileList; }, }, }; </script> ``` CustomUploadList.vue 组件的代码如下： ```html <template> <el-upload-list class="custom-upload-list" :file-list="fileList"> <template slot-scope="{file}"> <div class="custom-list-item"> <img :src="file.url" class="custom-list-item-thumbnail"> <div class="custom-list-item-name">{{ file.name }}</div> <div class="custom-list-item-actions"> <el-button size="small" type="text" @click="handleRemove(file)">删除</el-button> </div> </div> </template> </el-upload-list> </template> <script> export default { props: { fileList: { type: Array, default: () => [], }, }, methods: { handleRemove(file) { const index = this.fileList.indexOf(file); if (index !== -1) { this.fileList.splice(index, 1); } }, }, }; </script> ``` 希望这个示例能够帮助到您。如果您有任何问题，请随时提出。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值