当前位置:网站首页>Uniapp uploads and displays avatars locally, and converts avatars into Base64 format and stores them in MySQL database
Uniapp uploads and displays avatars locally, and converts avatars into Base64 format and stores them in MySQL database
2022-07-07 00:20:00 【ChangYan.】
The function you want to realize is : Choose a picture locally as the avatar , Then put the picture as base64 The format is stored in the database .
The effect is as follows :
- This front-end page uses the free template shared by predecessors in the plug-in mall :https://ext.dcloud.net.cn/plugin?id=2027
about html Some Click to get avatars, master has finished , There is no need to change this part in the following figure .
- The next step is to convert the uploaded avatar into base64 Format
avatarChoose() {
let that = this;
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
var tempFilePaths = res.tempFilePaths;
pathToBase64(tempFilePaths[0]) // Image to base64 Tools
.then(base64 => {
console.log(base64);
console.log(typeof(base64));
that.avatar = base64; // Convert the document to base64 And display
that.avatarUpload(base64); // At the same time, upload the avatar to the database for storage
})
.catch(error => {
console.error(error)
})
}
});
},
It's used here pathToBase64
This tool , So you need to download it in the plug-in market and introduce it into the project https://ext.dcloud.net.cn/plugin?id=123
Here I output the conversion result and the type of the result
You can see the display of the console , Successful transformation , and base64 The type is String character string
- Now the avatar just uploaded can be displayed , The next step is to store the image in the database .
In the last step of the previous code, I called avatarUpload function
So add code , Send data to the back end :
avatarUpload(avatar) {
let that = this;
var res = {
"userId": that.userId, // Corresponding to which user uploads the avatar
"avatar": avatar // Successful transformation base64
}
uni.request({
url: "http://localhost:8080/user/avatarUpload", // To back end
data: JSON.stringify(res), // Data to transfer
header: {
token: that.token },
method: "PUT",
success(r) {
console.log(r);
if (r.data.message == " Successful operation ") {
uni.showToast({
title: " Set up the success "
});
} else {
uni.showToast({
title: r.data.message,
icon: "error",
});
}
},
fail() {
uni.showToast({
title: " Network error ",
icon: "error",
});
},
});
},
For the back end , First, configure the database
Add... To the table avatar attribute
For this avatar Type of attribute , What I set up is mediumtext, Prevent overflow , That is to say base64 Is too long. , Fear varchar Class cannot survive .
( In fact, what I initially thought was that since it was String character string , Then set it to varchar, Then Baidu said varchar The maximum length of can reach 65535, So I wrote the length there 65535, The result is confirmed as soon as you enter , It automatically becomes mediumtext type , It can be said to be very intelligent …)Then add... To the class avatar attribute
Finally, the backend Java stay controller Receive at
@PreAuthorize(value = "hasAuthority('sys:put')")
@ApiOperation(" Upload your avatar " )
@PutMapping("/avatarUpload")
public ResponseResult avatarUpload(@RequestBody @Valid User user) {
int res = userService.updateUserById(user);
Map<String, Integer> map = new HashMap<>();
map.put(" Number of rows affected ",res);
return new ResponseResult<Map>(200," Successful operation ", map);
}
Because the front end only transmits userId and avatar, So call updateUserById
Function to store the avatar in the database . Finally, you can see the running results :
Storage success !
边栏推荐
- 基于jsp+servlet+mysql框架的旅游管理系统【源码+数据库+报告】
- 沉浸式投影在线下展示中的三大应用特点
- app通用功能测试用例
- 2022 PMP project management examination agile knowledge points (9)
- Oracle中使用包FY_Recover_Data.pck来恢复truncate误操作的表
- 数据运营平台-数据采集[通俗易懂]
- 三句话简要介绍子网掩码
- How about the order management of okcc call center
- Cas d'essai fonctionnel universel de l'application
- How can computers ensure data security in the quantum era? The United States announced four alternative encryption algorithms
猜你喜欢
【vulnhub】presidential1
Imeta | Chen Chengjie / Xia Rui of South China Agricultural University released a simple method of constructing Circos map by tbtools
基于jsp+servlet+mysql框架的旅游管理系统【源码+数据库+报告】
uniapp实现从本地上传头像并显示,同时将头像转化为base64格式存储在mysql数据库中
On February 19, 2021ccf award ceremony will be held, "why in Hengdian?"
MVC and MVVM
app通用功能测试用例
System activity monitor ISTAT menus 6.61 (1185) Chinese repair
37 pages Digital Village revitalization intelligent agriculture Comprehensive Planning and Construction Scheme
DAY THREE
随机推荐
Leecode brushes questions and records interview questions 01.02 Determine whether it is character rearrangement for each other
1000 words selected - interface test basis
Encryption algorithm - password security
MATLIB reads data from excel table and draws function image
数据运营平台-数据采集[通俗易懂]
PXE server configuration
File and image comparison tool kaleidoscope latest download
Leecode brush questions record sword finger offer 11 Rotate the minimum number of the array
uniapp实现从本地上传头像并显示,同时将头像转化为base64格式存储在mysql数据库中
Why should a complete knapsack be traversed in sequence? Briefly explain
48 page digital government smart government all in one solution
2021 SASE integration strategic roadmap (I)
pinia 模块划分
17、 MySQL - high availability + read / write separation + gtid + semi synchronous master-slave replication cluster
[automated testing framework] what you need to know about unittest
Core knowledge of distributed cache
2022/2/11 summary
How can computers ensure data security in the quantum era? The United States announced four alternative encryption algorithms
陀螺仪的工作原理
ldap创建公司组织、人员