[JavaScript知识库] el-upload+boot上传头像

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> el-upload+boot上传头像 -> 正文阅读

[JavaScript知识库]el-upload+boot上传头像

具体步骤

因为一直无法实现将图片保存到本地，所以我在gitee上新建了一个图床仓库，把图片文件都传到图床上，保证用户头像的正常回显。

1.新建gitee图床和后端代码

推一个大佬的链接：Springboot实战：实现本地上传图片到Gitee图床(含完整代码)

2.前端代码

经过我将近一天的试错，搞到一种可以成功实现的方法。

2.1 el-upload组件

<el-upload
                        class="avatar-uploader"
                        action="#"
                        accept=".jpeg,.png,.jpg,.bmp,.gif"
                        :show-file-list="false"
                        :before-upload="beforeAvatarUpload"
                        :http-request="uploadHeadClick"
                >
                    <div class="block" style="margin-top: 20px"><el-avatar :size="100" :src="user.avatar"></el-avatar></div>
                    <el-button size="small" >编辑头像</el-button>
                　　<div slot="tip" class="el-upload__tip">只能上传jpg/jpeg/png/bmp文件，且不超过500kb</div>
                </el-upload>

2.2 methods

在这里插入图片描述

<script>
    import {uploadHead} from '../../api/fixed-asset'
    export default {
        name: "xxx",
        created() {
        },
        data() {
            return {
            	user:{
            		avatar:''
            	},
                fd: '',
            }
        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.user.avatar = URL.createObjectURL(file.raw)
            },
            //修改头像
            uploadHeadClick(data) {
                this.fd = new FormData()
                this.fd.append('file',data.file)
                uploadHead(this.fd).then(res=>{
                    this.$set(this.user,'avatar',res.data.data);
                    if(res.data.code==200){
                        //同步新的头像数据到数据库，调你们的更新对象的方法
                    }
                })
            },
    }


</script>