springboot+vue+element+七牛云+实现图片上传功能

注册七牛云

链接地址：

/products/kodo，免费有10G空间与免费一个月的域名地址注册后，开启对象存储，创建空间选择地区，

上传方式：

1：前端现将图片上传后端，再上传表单数据到后端

前端代码：

<template><div class="blogs"><div class="content-header"><h1>博客管理<small>发布博客</small></h1><el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb"><el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item><el-breadcrumb-item>博客管理</el-breadcrumb-item><el-breadcrumb-item>发布博客</el-breadcrumb-item></el-breadcrumb></div><div class="app-container"><div class="blog-box" style=""><el-form ref="addForm" :model="formData" :rules="rules" ><div class="required field"><div class="ui left labeled input"><el-form-item prop="shareStatement"><el-select v-model="formData.shareStatement" placeholder="原创" style="margin-right: 10px; width: 100px;margin-left: 155px"><el-optionv-for="item in shareStatementList":key="item.id":label="item.name":value="item.name"></el-option></el-select></el-form-item><el-form-item prop="title"><el-button type="primary"><i class="el-icon-arrow-down el-icon-s-opportunity"></i></el-button><el-input v-model="formData.title" placeholder="请输入标题" style="width: 790px"></el-input></el-form-item></div></div><div class="mavonEditor" style="margin-top: 10px;"><el-form-item prop="content"><mavon-editor :codeStyle="markdownOption.codeStyle"ref=mdstyle="max-height: 500px":scrollStyle="true":ishljs="true"@imgAdd="handleEditorImgAdd"@imgDel="handleEditorImgDel":toolbars="markdownOption"v-model="formData.content"/></el-form-item></div><div class="two fields" style="margin-top: 3px"><el-form-item prop="typeId"><el-row><el-select v-model="formData.typeId" placeholder="请选择分类" style="margin-left: 155px;float:left; width: 470px; margin-right: 8px"><el-optionv-for="item in typeList":key="item.typeId":label="item.typeName":value="item.typeId"></el-option></el-select><el-select v-model="formData.value" multiple placeholder="请选择标签" style="width: 470px"><el-optionv-for="item in tagList":key="item.tagId":label="item.tagName":value="item.tagId"></el-option></el-select></el-row></el-form-item></div><div class="field" style="margin-top: 8px;margin-left: 155px"><el-button type="primary"><el-uploadclass="avatar-uploader"action="http://localhost:9002/upload/saveQiNiu"accept="image/png,.jpg"multiple:limit="1":on-exceed="masterFileMax":show-file-list="false":http-request="uploadPic":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><img v-if="imageUrl" :src="imageUrl" class="avatar"><i v-else class="el-icon-arrow-down el-icon-picture"></i></el-upload><!-- <i class="el-icon-arrow-down el-icon-picture"></i>--></el-button><el-input v-model="formData.firstPicture" style="width: 895px"></el-input><el-form-item prop="description" style="margin-top: 8px"><el-inputtype="textarea":autosize="{ minRows: 2, maxRows: 5}"placeholder="请写一下关于文章的摘要，这将让你的博客显示在首页时，帮助你吸引更多的读者"v-model="formData.description" style="margin-top: 10px;width: 950px"></el-input></el-form-item></div><div class="inline fields" style="margin-top: 10px;margin-left: 155px"><el-checkbox v-model="formData.recommend">推荐</el-checkbox><el-checkbox v-model="formData.appreciation">赞赏</el-checkbox><el-checkbox v-model="mentabled">评论</el-checkbox></div><div class="ui right aligned container"><button type="button" class="ui button" onclick="window.history.go(-1)" >返回</button><button type="button" id="save-btn" class="ui secondary button">保存</button><button type="button" id="publish-btn" class="ui my-blue button" @click="addBlog">发布</button></div></el-form></div></div><br><br></div></template><script>// import editormd from '../../../src/assets/lib/editormd/editormd.min.js'export default {data () {return {imageUrl: '',imgFile: [],user: {},nickname: '',// 被激活的链接地址avatar: '',rules: {// 校验规则title: [{required: true, message: '请输入标题', trigger: 'blur' },{min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }],content: [{required: true, message: '请输入正文内容', trigger: 'blur' },{min: 10, message: '长度最少是 10 个字符', trigger: 'blur' }],typeId: [{required: true, message: '至少要有一个分类', trigger: 'blur' }],shareStatement: [{required: true, message: '至少选择一个文章信息', trigger: 'blur' }],description: [{required: true, message: '麻烦写一个简单的摘要', trigger: 'blur' },{min: 10, max: 110, message: '长度在 10 到 110 个字符之间', trigger: 'blur' }]},formData: {shareStatement: '', // 版权状态typeId: '', // 分类idtitle: '', // 博客标题content: '#### 使用 markdown 编辑器来开始书写你的博客吧!&emsp;已经支持markdown编辑器上传图片的功能', // 正文文本firstPicture: '点按钮添加博客首图（建议尺寸是800乘450），否则显示会不正常；或者自行添加图片链接，图片参考地址(https://picsum.photos/images),修改右边链接末尾id即可(https://unsplash.it/800/450?image=1005)', // 博客首图链接地址recommend: true, // 是否推荐appreciation: false, // 是否开启赞赏commentabled: true, // 是否开启评论value: [], // 标签列表,flag: '', // 发布状态 (草稿还是发布)description: ''}, // 表单数据toolbars: {bold: true, // 粗体italic: true, // 斜体header: true, // 标题underline: true, // 下划线strikethrough: true, // 中划线mark: true, // 标记superscript: true, // 上角标subscript: true, // 下角标quote: true, // 引用ol: true, // 有序列表ul: true, // 无序列表link: true, // 链接imagelink: true, // 图片链接code: true, // codetable: true, // 表格fullscreen: true, // 全屏编辑readmodel: true, // 沉浸式阅读htmlcode: true, // 展示html源码help: true, // 帮助/* 1.3.5 */undo: true, // 上一步redo: true, // 下一步trash: true, // 清空save: true, // 保存（触发events中的save事件）/* 1.4.2 */navigation: true, // 导航目录/* 2.1.8 */alignleft: true, // 左对齐aligncenter: true, // 居中alignright: true, // 右对齐/* 2.2.1 */subfield: true, // 单双栏模式preview: true // 预览},typeList: [],tagList: [],shareStatementList: [{id: 1,name: '原创'},{id: 2,name: '转载'},{id: 3,name: '翻译'}],contentEditor: '',markdownOption: {bold: true, // 粗体italic: true, // 斜体header: true, // 标题underline: true, // 下划线strikethrough: true, // 中划线mark: true, // 标记superscript: true, // 上角标subscript: true, // 下角标quote: true, // 引用ol: true, // 有序列表ul: true, // 无序列表link: true, // 链接imagelink: true, // 图片链接code: true, // codetable: true, // 表格fullscreen: true, // 全屏编辑readmodel: true, // 沉浸式阅读htmlcode: true, // 展示html源码help: true, // 帮助/* 1.3.5 */undo: true, // 上一步redo: true, // 下一步trash: true, // 清空save: true, // 保存（触发events中的save事件）/* 1.4.2 */navigation: true, // 导航目录/* 2.1.8 */alignleft: true, // 左对齐aligncenter: true, // 居中alignright: true, // 右对齐/* 2.2.1 */subfield: true, // 单双栏模式preview: true, // 预览codeStyle: 'monokai-sublime'}}},created () {this.getTypeList()this.getUser()this.getTagList()},methods: {masterFileMax (files, fileList) {console.log(files, fileList)this.$message.warning('请最多上传一张图片')},async uploadPic (param) {var fileObj = param.filevar form = new FormData()// 文件对象form.append('file', fileObj)const {data: res } = await this.$http.post('http://localhost:9002/upload/saveQiNiu', form)if (res.flag) {// 弹出提示信息this.$message.success('上传图片成功')this.formData.avatar = res.datathis.formData.firstPicture = res.data} else {// 执行失败this.$message.error(res.message)}},handleAvatarSuccess (res, file) {this.imageUrl = URL.createObjectURL(file.raw)},beforeAvatarUpload (file) {const isJPG = file.type === 'image/jpeg'const isLt5M = file.size / 1024 / 1024 < 5if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!')}if (!isLt5M) {this.$message.error('上传头像图片大小不能超过5MB!')}return isJPG && isLt5M},handleEditorImgAdd (pos, $file) {var _this = this;const formData = new FormData()formData.append('file', $file)this.imgFile[pos] = $filethis.$http.post('/serverApi/oss/articleImage', formData).then(res => {if (res.data.flag) {this.$message.success('上传成功')_this.$refs.md.$imglst2Url([[pos, res.data.data.url]])} else {this.$message.error(res.data.message)}})},handleEditorImgDel (pos) {delete this.imgFile[pos]this.$message.error('暂时无法删除图片！')},getUser () {this.user = window.sessionStorage.getItem('user')this.nickname = JSON.parse(this.user).nicknamethis.avatar = JSON.parse(this.user).avatar},addBlog () {// 进行表单校验this.$refs.addForm.validate((valid) => {if (valid) {// 表单校验通过，发ajax请求，把数据录入至后台处理// const param = this.$encrypTion(JSON.stringify(this.formData))this.formData.flag = '发布'// var param = this.$encrypTion(this.formData)console.log("表单内容")console.log(this.formData)this.$http.post('/api/server/blog/add', this.formData).then((res) => {// 关闭新增窗口this.dialogFormVisible = falseif (res.data.flag) {// 弹出提示信息this.$message({message: '添加成功',type: 'success'})this.$router.push('/blogs')} else {// 执行失败this.$message.error('添加失败')}})} else {// 校验不通过this.$message.error('校验失败，请检查输入格式')return false}})},// 获取所有的分类并回显async getTypeList () {const {data: res } = await this.$http.get('/api/server/types2/getTypeList')this.typeList = res.data},// 获取所有的标签并回显async getTagList () {const {data: res } = await this.$http.get('/api/server/tag/getTagList')this.tagList = res.data}},mounted () {$('.menu.toggle').click(function () {$('.m-item').toggleClass('m-mobile-hide')})$('.ui.dropdown').dropdown({on: 'hover'})$('.ui.form').form({// fields: {// title: {//identifier: 'title',//rules: [{// type: 'empty',// prompt: '标题：请输入博客标题'//}]// }// }})}}</script><style scoped>@import "../../../assets/css/me.css";.mavonEditor {width: 75%;height: 100%;margin: 0 auto;}.blog-box {position: relative;border-radius: 3px;background: #ffffff;border-top: 3px solid #3c8dbc;padding: 10px;margin-bottom: 20px;width: 100%;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}.avatar-uploader .el-upload {border: 5px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}.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;}.avatar {width: 60px;height: 60px;display: block;}</style>

后端代码：

在pom文件中添加

<!--图片上传--><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.4</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.79</version></dependency><!--//七牛云--><dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><version>[7.2.0, 7.2.99]</version></dependency>

图片上传到七牛云

package pers.fjl.server.controller.admin;import com.baomidou.mybatisplus.toolkit.StringUtils;import io.swagger.annotations.Api;import org.springframework.web.bind.annotation.CrossOrigin;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile;import mon.constant.MessageConstant;import mon.entity.Result;import pers.fjl.server.utils.QiNiuUtil;import javax.annotation.Resource;import java.io.FileInputStream;import java.io.IOException;import java.text.SimpleDateFormat;import java.util.Date;@Api(value = "图片上传", description = "图片上传到七牛云")@RequestMapping("/upload")@RestController@CrossOriginpublic class UploadImg {@Resourceprivate QiNiuUtil qiNiuUtil;// region 将图片保存到七牛云@PostMapping("/saveQiNiu")public Result uploadIMg(MultipartFile file){String url; //图片上传到七牛云，返回的地址try (FileInputStream inputStream = (FileInputStream) file.getInputStream()) {url = QiNiuUtil.upload2Qiniu(inputStream, reName(file.getOriginalFilename()));return new Result(true, MessageConstant.OK,"图片上床成功",url);} catch (IOException e) {e.printStackTrace();}return new Result(true, MessageConstant.OK,"图片上床成功",null);}// endregion// region 设置图片名称private String reName(String name){if(StringUtils.isEmpty(name)) return "";int pos = name.lastIndexOf(".");SimpleDateFormat simpleDateFormat = new SimpleDateFormat("-yyyyMMddHHmmssSSS");return name.substring(0,pos) + simpleDateFormat.format(new Date()) + name.substring(pos);}// endregion}

七牛云工具类

package pers.fjl.server.utils;import com.alibaba.fastjson.JSON;import com.baomidou.mybatisplus.toolkit.StringUtils;import mon.QiniuException;import mon.Zone;import com.qiniu.http.Response;import com.qiniu.storage.Configuration;import com.qiniu.storage.Region;import com.qiniu.storage.UploadManager;import com.qiniu.util.Auth;import org.ponent;import java.io.FileInputStream;import java.util.Map;@Componentpublic class QiNiuUtil {//外链域名地址public static String qiniu_img_url_pre = "****";//AccessKeypublic static String ACCESS_KEY = "********";//SecretKeypublic static String SECRET_KEY = "*******";//存储空间名称public static String bucketname = "******";/*** 上传文件*/public static String upload2Qiniu(FileInputStream file, String uploadFileName) {//构造一个带指定Zone对象的配置类,Zone.zone0()代表华东地区//构造中是地区，不同的地域，参数不同Configuration cfg = new Configuration(Region.huabei());//...其他参数参考类注释UploadManager uploadManager = new UploadManager(cfg);//默认不指定key的情况下，以文件内容的hash值作为文件名String key = uploadFileName;Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);String upToken = auth.uploadToken(bucketname);try {Response response = uploadManager.put(file, key, upToken, null, null);//解析上传成功的结果String bodyString = response.bodyString();Map map = JSON.parseObject(bodyString, Map.class);String hash = (String) map.get("key");if (StringUtils.isNotEmpty(hash)) {return qiniu_img_url_pre + uploadFileName;}System.out.println(response.bodyString());// 访问路径System.out.println(qiniu_img_url_pre + uploadFileName);} catch (QiniuException ex) {Response r = ex.response;System.err.println(r.toString());try {System.err.println(r.bodyString());return null;} catch (QiniuException ex2) {//ignoreex.printStackTrace();return null;}}return null;}}```java@Api(value = "博客管理模块", description = "博客管理模块的接口信息")@RequestMapping("/blog")@RestController@CrossOriginpublic class BlogController {@Resourceprivate BlogService blogService;@Resourceprivate ViewsService viewsService;@PostMapping("/add")public Result addType(@RequestBody AddBlogVo addBlogVo, HttpServletRequest request) {User user = (User) request.getAttribute("currentUser");boolean flag = blogService.addBlog(addBlogVo, user.getUid());return new Result(flag, "添加成功", MessageConstant.OK);}

其他文件就不上传了。只要拿到前端传过来的数据就好办了；

2：表单数据与图片一起上传

前端代码

<template><div class="login_container"><!-- banner --><div class="archive-banner banner"><h1 class="banner-title">登录</h1></div><div class="login_box"><!-- 头像区域 --><div class="avatar_box"><img src="../../assets/logo.png" alt=""></div><!-- 登录表单区域 --><el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" :multiple="true" class="login_form"><!-- 用户名 --><el-form-item prop="username"><el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user-solid"></el-input></el-form-item><!-- 密码 --><el-form-item prop="password"><el-input v-model="loginForm.password" placeholder="请输入密码" prefix-icon="el-icon-moon-night" type="password"></el-input></el-form-item><el-form-item prop="code"><el-input v-model="loginForm.code" placeholder="请输入验证码" prefix-icon="el-icon-picture-outline-round" style="width: 50%"></el-input><img v-bind:src="verifyCode" @click="getVerifyCode()" width="130px" height="35px" style="float: right;cursor:pointer;" /></el-form-item><!-- 按钮区域 --><el-form-item class="btns"><el-button type="success" @click="handleCreate">注册</el-button><el-button type="primary" @click="login">登录</el-button><el-button type="info" @click="resetPassword">忘记密码</el-button></el-form-item><div></div><div class="social-login-title">社交账号登录</div><div class="social-login-wrapper"><!-- 微博登录 --><av-if="showLogin('weibo')"class="mr-3 iconfont iconweibo"style="color:#e05244"@click="weiboLogin"/><!-- qq登录 --><av-if="showLogin('qq')"class="iconfont iconqq"style="color:#00AAEE; margin-left: 8px"@click="qqLogin"/></div></el-form></div><!-- 注册弹层--><div class="add-form"><el-dialog title="注册用户" :visible.sync="dialogFormVisible"><el-form ref="registForm" :model="formData" :rules="loginFormRules" label-position="right"label-width="100px" ><el-row><el-col :span="12"><el-form-item label="用户名" prop="username"><el-input label="请输入用户名" v-model="formData.username"/></el-form-item></el-col><el-col :span="12"><el-form-item label="密码" prop="password"><el-input v-model="formData.password"/></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="昵称" prop="nickname"><el-input v-model="formData.nickname"/></el-form-item></el-col><el-col :span="12"><el-form-item label="手机号" prop="email"><el-input v-model="formData.email"/></el-form-item></el-col></el-row><el-col><el-form-item label="选择头像"><el-uploadaction="http://localhost:9002/user/add"list-type="picture-card"ref="upload":on-success="handleAvatarSuccess":auto-upload="false":limit="1":data="formData"><i class="el-icon-plus"></i></el-upload></el-form-item></el-col></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取消</el-button><el-button type="primary" @click="regist()">确定</el-button></div></el-dialog></div></div></template><script>export default {data () {return {imageUrl: '',verifyCode: '',formData: {username: '',password: '',nickname: '',email: '',avatar: '',},fileList: [],imgUrl: '',dialogFormVisible: false, // 增加表单是否可见// 这是登录表单的数据绑定对象loginForm: {username: '',password: '',verKey: '',code: ''},// 这是表单的验证规则对象loginFormRules: {// 验证用户名是否合法username: [{required: true, message: '请输入登录名称', trigger: 'blur' },{min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }],// 验证密码是否合法password: [{required: true, message: '请输入登录密码', trigger: 'blur' },{min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }],// 验证码code: [{required: true, message: '请输入验证码', trigger: 'blur' }],nickname: [{required: true, message: '请输入昵称', trigger: 'blur' },{min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }],email: [{required: true, message: '请填写电子邮箱', trigger: 'change' }]}}},created () {this.getVerifyCode()},methods: {weiboLogin () {// 保留当前路径this.$mit("saveLoginUrl", this.$route.path);window.open("/oauth2/authorize?client_id=" +this.config.WEIBO_APP_ID +"&response_type=code&redirect_uri=" +this.config.WEIBO_REDIRECT_URI,"_self");},qqLogin () {// 保留当前路径this.$mit("saveLoginUrl", this.$route.path);if (navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i)) {// eslint-disable-next-line no-undefQC.Login.showPopup({appId: this.config.QQ_APP_ID,redirectURI: this.config.QQ_REDIRECT_URI});} else {window.open("/oauth2.0/show?which=Login&display=pc&client_id=" ++this.config.QQ_APP_ID +"&response_type=token&scope=all&redirect_uri=" +this.config.QQ_REDIRECT_URI,"_self");}},socialLoginList () {return this.$store.state.blogInfo.websiteConfig.socialLoginList;},showLogin () {return function (type) {return this.socialLoginList.indexOf(type) !== -1;};},resetPassword () {this.$store.state.forgetFlag = true;},masterFileMax (files, fileList) {console.log(files, fileList)this.$message.warning('请最多上传一张图片')},handleAvatarSuccess (res, file) {console.log(111111)this.dialogFormVisible = falsethis.$message.success(res.message);this.formData = {};},beforeAvatarUpload (file) {const isJPG = file.type === 'image/jpeg'const isLt5M = file.size / 1024 / 1024 < 5if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!')}if (!isLt5M) {this.$message.error('上传头像图片大小不能超过5MB!')}return isJPG && isLt5M},async getVerifyCode () {const {data: res } = await this.$http.get('/api/server/admapi/captcha')this.verifyCode = res.datathis.loginForm.verKey = res.code// this.$message({// message: '部分功能只在用户登录后开发',// type: 'info'// })},// 点击重置按钮，重置登录表单resetLoginForm () {this.$refs.loginFormRef.resetFields()},// 弹出添加窗口handleCreate () {this.dialogFormVisible = true},regist () {// var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/var regEmail = /^1[3456789]\d{9}$/// eslint-disable-next-line eqeqeqif (this.formData.email != '' && !regEmail.test(this.formData.email)) {this.$message({message: '手机格式不正确',type: 'error'})this.formData.email = ''return false}// 进行表单校验this.$refs.registForm.validate((valid) => {if (valid) {this.$refs.upload.submit()} else {this.$message.error('校验失败，请检查输入格式')return false}})},login () {this.$refs.loginFormRef.validate(async valid => {if (!valid) return// console.log('===>' + JSON.stringify(this.loginForm))// console.log('===>' + this.$encrypTion(param))// var param = this.$encrypTion(JSON.stringify(this.loginForm))// console.log('param2' + param2)const {data: res } = await this.$http.post('/api/server/admapi/login', this.loginForm)console.log("登录")console.log(res)if (res.flag !== true) {this.$message.error(res.message)await this.getVerifyCode()} else {this.$message.success('登录成功')// 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中// 1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问// 1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中window.sessionStorage.setItem('token', res.code)window.sessionStorage.setItem('user', JSON.stringify(res.data))// 2. 通过编程式导航跳转到后台主页，路由地址是 /homeawait this.$router.push('/welcome')// 刷新页面，删除vuex数据// setTimeout(() => {// window.location.reload()// }, 100)}})}}}</script><style lang="less" scoped>.banner-title {animation: title-scale 1s;position: absolute;top: 25rem;padding: 0 0.5rem;width: 100%;font-size: 2.5rem;text-align: center;color: #eee;}.archive-banner {height: 110vh;background: url(https://r.photo./psc?/V53KcXfb1umonn4HbITu3rINxs43TczD/45NBuzDIW489QBoVep5mccYPEGHYJF8vf05Y7Jp3Sq4PYCDwfPyvkq4c5VlhffPJbHw4QoE1dsiS8OtN2H5XvhPtg1C1JZwAOMeqYFSoGDg!/r) center center /cover no-repeat;background-color: #49b1f5;}.login_container {background-color: #2b4b6b;height: 100%;}.login_box {width: 450px;height: 410px;background-color: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);.avatar_box {height: 130px;width: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow: 0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}}}.login_form {position: absolute;bottom: 0;width: 100%;padding: 0 20px;box-sizing: border-box;}.btns {display: flex;justify-content: flex-end;}.avatar-uploader .el-upload {border: 5px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}.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;}.avatar {width: 60px;height: 60px;display: block;}</style>

后端代码：

package pers.fjl.server.controller.admin;import com.baomidou.mybatisplus.toolkit.StringUtils;import io.lettuce.core.dynamic.annotation.Value;import io.swagger.annotations.Api;import org.springframework.beans.BeanUtils;import org.springframework.web.bind.annotation.*;import org.springframework.web.context.ContextLoader;import org.springframework.web.context.WebApplicationContext;import org.springframework.web.multipart.MultipartFile;import mon.constant.MessageConstant;import mon.entity.Result;import mon.po.User;import mon.vo.UserVo;import pers.fjl.server.annotation.IpRequired;import pers.fjl.server.service.UserService;import pers.fjl.server.utils.JWTUtils;import pers.fjl.server.utils.QiNiuUtil;import pers.fjl.server.utils.RedisUtil;import pers.fjl.server.utils.SDKSendTemplateSMS;import javax.annotation.Resource;import javax.servlet.http.HttpServletRequest;import com.alibaba.fastjson.JSON;import java.io.*;import java.text.SimpleDateFormat;import java.util.Date;import java.util.HashMap;/*** 用户模块** @author fangjiale 01月26日*/@Api(value = "用户模块", description = "用户模块的接口信息")@RequestMapping("/user")@RestController@CrossOriginpublic class UserController {@Resourceprivate UserService userService;@PostMapping("/add")public Result login( User user,MultipartFile file,HttpServletRequest request) {System.out.println("user:"+user);System.out.println("头像:"+file.getOriginalFilename());String imgUploadInfo = uploadImageAndSetAvatar(user, file);int addRes = userService.add(user);String res = addRes == 1 ? "成功":"失败";return new Result(true, "注册" + res, MessageConstant.OK);}private String uploadImageAndSetAvatar(User user, MultipartFile file){String url; //图片上传到七牛云，返回的地址try (FileInputStream inputStream = (FileInputStream) file.getInputStream()) {url = QiNiuUtil.upload2Qiniu(inputStream, reName(file.getOriginalFilename()));user.setAvatar(url);return "图片上传成功";} catch (IOException e) {e.printStackTrace();}return "图片上传失败";}// region 图片重命名private String reName(String name){if(StringUtils.isEmpty(name)) return "";int pos = name.lastIndexOf(".");SimpleDateFormat simpleDateFormat = new SimpleDateFormat("-yyyyMMddHHmmssSSS");return name.substring(0,pos) + simpleDateFormat.format(new Date()) + name.substring(pos);}// endregion}

两种方式用到的七牛云工具类是同一个