uniapp传map给后端
时间: 2023-05-18 13:02:26 浏览: 86
可以使用JSON.stringify()将map转换为JSON字符串,然后通过ajax或fetch等方式将JSON字符串传给后端。后端可以使用JSON.parse()将JSON字符串转换为map对象进行处理。
相关问题
uniapp 把base64转文件流并发送文件流给后端,文件发出为空
可以尝试以下步骤:
1. 确保前端将文件转成 base64 格式之后,没有发生数据丢失。
2. 将 base64 格式的数据发送给后端时,需要将字符串转成字节数组(Uint8Array),再将字节数组转成 Blob 对象,最后将 Blob 对象传递给后端。
代码示例:
```javascript
// 将 base64 格式的数据转成字节数组
const bytes = atob(base64Data).split('').map(char => char.charCodeAt(0))
// 将字节数组转成 Blob 对象
const blob = new Blob([new Uint8Array(bytes)], { type: 'image/jpeg' })
// 发送 Blob 对象给后端
const formData = new FormData()
formData.append('file', blob, 'filename.jpg')
axios.post('/upload', formData)
```
注意:上述代码中的 `base64Data` 是前端转成 base64 格式的数据,`axios` 是一个发送 HTTP 请求的工具,具体使用方法可以参考 axios 的官方文档。同时,也需要在服务端对应的接口中接收 `file` 参数,这个参数是一个文件对象。
uniapp微信小程序换头像,MySQL后端用Springboot
要实现 uniapp 微信小程序的头像更换功能,可以通过以下步骤来完成:
1. 在小程序中调用微信的 `chooseImage` 接口,获取用户选择的图片文件,并将其转为 base64 编码的字符串格式。
2. 将 base64 编码的字符串发送到后端 Springboot 服务器,使用 `Base64.decodeBase64` 方法将其解码为字节数组。
3. 将字节数组转为文件,保存到服务器本地的文件系统中。
4. 将文件的保存路径和用户的信息(如用户 ID)存入 MySQL 数据库中。
5. 当用户需要查看自己的头像时,从数据库中获取头像文件的路径,将其读取为字节数组,然后将其转为 base64 编码的字符串返回给小程序。
具体实现可以参考以下代码:
在 uniapp 中实现选择图片并发送到后端服务器:
```javascript
//uniapp 选择图片并转为 base64 字符串
uni.chooseImage({
count: 1,
success: function (res) {
let tempFilePaths = res.tempFilePaths;
uni.getFileSystemManager().readFile({
filePath: tempFilePaths[0],
encoding: 'base64',
success: function (result) {
let base64 = result.data;
//发送请求到后端服务器
uni.request({
url: 'http://localhost:8080/upload',
method: 'POST',
header: {
'content-type': 'application/json'
},
data: {
image: base64
},
success: function (res) {
console.log(res);
},
fail: function (res) {
console.log("上传失败");
}
})
},
fail: function (e) {
console.log(e);
}
})
}
})
```
在 Springboot 中实现接收并保存图片:
```java
@RestController
public class ImageController {
@PostMapping(value = "/upload")
public String uploadImage(@RequestBody Map<String, String> requestMap) {
String base64 = requestMap.get("image");
//将 base64 编码的字符串转为字节数组
byte[] bytes = Base64.decodeBase64(base64);
//将字节数组转为文件,保存到服务器本地的文件系统中
String filePath = "/path/to/save/image";
try {
FileOutputStream fos = new FileOutputStream(filePath);
fos.write(bytes);
fos.flush();
fos.close();
} catch (Exception e) {
e.printStackTrace();
}
//将文件的保存路径和用户信息存入 MySQL 数据库中
String userId = "123456";
String sql = "INSERT INTO user (user_id, avatar_path) VALUES (?, ?)";
try {
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "123456");
PreparedStatement pstmt = conn.prepareStatement(sql);
pstmt.setString(1, userId);
pstmt.setString(2, filePath);
pstmt.executeUpdate();
pstmt.close();
conn.close();
} catch (Exception e) {
e.printStackTrace();
}
return "success";
}
}
```
在 Springboot 中实现获取用户头像并返回 base64 字符串:
```java
@RestController
public class ImageController {
@GetMapping(value = "/avatar/{userId}")
public String getAvatar(@PathVariable("userId") String userId) {
String sql = "SELECT avatar_path FROM user WHERE user_id = ?";
String filePath = "";
try {
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "123456");
PreparedStatement pstmt = conn.prepareStatement(sql);
pstmt.setString(1, userId);
ResultSet rs = pstmt.executeQuery();
if (rs.next()) {
filePath = rs.getString("avatar_path");
}
rs.close();
pstmt.close();
conn.close();
} catch (Exception e) {
e.printStackTrace();
}
//将头像文件读取为字节数组并转为 base64 编码的字符串
String base64 = "";
try {
FileInputStream fis = new FileInputStream(filePath);
byte[] bytes = new byte[fis.available()];
fis.read(bytes);
fis.close();
base64 = Base64.encodeBase64String(bytes);
} catch (Exception e) {
e.printStackTrace();
}
return base64;
}
}
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)