当前位置:网站首页>uniapp实现从本地上传头像并显示,同时将头像转化为base64格式存储在mysql数据库中
uniapp实现从本地上传头像并显示,同时将头像转化为base64格式存储在mysql数据库中
2022-07-06 16:43:00 【ChangYan.】
想实现的功能为:从本地选择一张图片作为头像,然后将该图片以base64格式存储在数据库中。
效果如下:
- 这个前端页面使用了插件商城里免费的前辈分享的模板:https://ext.dcloud.net.cn/plugin?id=2027
对于html部分点击获取头像前辈已经完成好,下图中的此部分无需更改。
- 下一步要做的就是将上传的头像转化为base64格式
avatarChoose() {
let that = this;
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
var tempFilePaths = res.tempFilePaths;
pathToBase64(tempFilePaths[0]) //图像转base64工具
.then(base64 => {
console.log(base64);
console.log(typeof(base64));
that.avatar = base64; //将文件转化为base64并显示
that.avatarUpload(base64); //同时将头像上传至数据库进行存储
})
.catch(error => {
console.error(error)
})
}
});
},
这里使用了pathToBase64
这个工具,所以需要去插件市场里下载并引入到项目中https://ext.dcloud.net.cn/plugin?id=123
我在此处输出了一下转化结果和结果的类型
可以看到控制台的显示,转化成功,而且base64的类型是String字符串
- 现在已经能将刚刚上传的头像显示出来了,接下来就是将该图片存储在数据库中。
在上段代码的最后一步调用了avatarUpload函数
所以添加代码,将数据传至后端:
avatarUpload(avatar) {
let that = this;
var res = {
"userId": that.userId, //对应于哪个用户上传头像
"avatar": avatar //转化成功的base64
}
uni.request({
url: "http://localhost:8080/user/avatarUpload", //传到后端
data: JSON.stringify(res), //要传输的数据
header: {
token: that.token },
method: "PUT",
success(r) {
console.log(r);
if (r.data.message == "操作成功") {
uni.showToast({
title: "设置成功"
});
} else {
uni.showToast({
title: r.data.message,
icon: "error",
});
}
},
fail() {
uni.showToast({
title: "网络错误",
icon: "error",
});
},
});
},
对于后端,先要配置数据库
在表中添加avatar属性
对于这个avatar属性的类型,我设置的是mediumtext,防止溢出,就是说base64太长了,害怕varchar类性存不下。
(其实我最初想的是既然是String字符串,那就设置成varchar,然后百度了一下说varchar的最大长度可以到65535,所以那里的长度我就写成了65535,结果一回车确定,它就自动变成了mediumtext类型,可以说很智能了…)然后在类中添加avatar属性
最后后端的Java在controller处进行接收
@PreAuthorize(value = "hasAuthority('sys:put')")
@ApiOperation("上传头像" )
@PutMapping("/avatarUpload")
public ResponseResult avatarUpload(@RequestBody @Valid User user) {
int res = userService.updateUserById(user);
Map<String, Integer> map = new HashMap<>();
map.put("影响行数",res);
return new ResponseResult<Map>(200,"操作成功", map);
}
这里因为前端只传了userId和avatar,所以调用updateUserById
函数完成头像到数据库的存储。最后可以看到运行结果:
存储成功!
边栏推荐
- 【2022全网最细】接口测试一般怎么测?接口测试的流程和步骤
- On February 19, 2021ccf award ceremony will be held, "why in Hengdian?"
- System activity monitor ISTAT menus 6.61 (1185) Chinese repair
- [vector retrieval research series] product introduction
- DAY SIX
- 2021 SASE integration strategic roadmap (I)
- Pinia module division
- AVL树到底是什么?
- Pdf document signature Guide
- What is AVL tree?
猜你喜欢
MVC and MVVM
DAY ONE
Every year, 200 billion yuan is invested in the chip field, and "China chip" venture capital is booming
rancher集成ldap,实现统一账号登录
[2022 the finest in the whole network] how to test the interface test generally? Process and steps of interface test
How rider uses nuget package offline
2021 SASE integration strategic roadmap (I)
Tourism Management System Based on jsp+servlet+mysql framework [source code + database + report]
工程师如何对待开源 --- 一个老工程师的肺腑之言
2022年PMP项目管理考试敏捷知识点(9)
随机推荐
DAY FOUR
Why is bat still addicted to 996 when the four-day working system is being tried out in Britain?
【向量检索研究系列】产品介绍
MySQL主从之多源复制(3主1从)搭建及同步测试
智能运维应用之道,告别企业数字化转型危机
Imeta | Chen Chengjie / Xia Rui of South China Agricultural University released a simple method of constructing Circos map by tbtools
Penetration test --- database security: detailed explanation of SQL injection into database principle
What is a responsive object? How to create a responsive object?
js导入excel&导出excel
从外企离开,我才知道什么叫尊重跟合规…
iMeta | 华南农大陈程杰/夏瑞等发布TBtools构造Circos图的简单方法
Building lease management system based on SSM framework
什么是响应式对象?响应式对象的创建过程?
MIT 6.824 - Raft学生指南
DAY TWO
DAY THREE
"Latex" Introduction to latex mathematical formula "suggestions collection"
华为mate8电池价格_华为mate8换电池后充电巨慢
准备好在CI/CD中自动化持续部署了吗?
Unity color palette | color palette | stepless color change function