写一个uniapp微信小程序换头像,mysql,后端用Springboot
时间: 2024-02-01 10:12:31 浏览: 107
这个需求可以分成三个步骤来实现:
1. 前端实现上传图片和展示图片
我们可以使用uniapp的upload组件来实现图片上传功能,同时使用uniapp的image组件来展示图片。代码如下:
```
<template>
<view>
<image :src="avatarUrl" mode="aspectFill"></image>
<button @click="chooseImage">更换头像</button>
</view>
</template>
<script>
export default {
data() {
return {
avatarUrl: ""
};
},
methods: {
chooseImage() {
uni.chooseImage({
count: 1,
sizeType: ["original", "compressed"],
sourceType: ["album", "camera"],
success: res => {
const tempFilePaths = res.tempFilePaths;
this.uploadImage(tempFilePaths[0]);
}
});
},
uploadImage(filePath) {
const uploadTask = uni.uploadFile({
url: "http://localhost:8080/upload",
filePath: filePath,
name: "file",
success: res => {
const data = JSON.parse(res.data);
this.avatarUrl = data.url;
}
});
}
}
};
</script>
```
2. 后端实现接收图片并保存到服务器上
我们可以使用Springboot提供的MultipartFile类来接收前端上传的图片,并使用java.io.File类将图片保存到服务器上。代码如下:
```
@RestController
public class UploadController {
@PostMapping("/upload")
public Map<String, String> upload(@RequestParam("file") MultipartFile file) throws IOException {
File saveFile = new File("D:/images/" + file.getOriginalFilename());
file.transferTo(saveFile);
Map<String, String> result = new HashMap<>();
result.put("url", "http://localhost:8080/images/" + file.getOriginalFilename());
return result;
}
}
```
3. 后端实现将图片地址保存到MySQL数据库中
我们可以使用Springboot提供的JdbcTemplate类来操作MySQL数据库。我们需要先创建一个名为user的表,其中包含id和avatar两个字段。代码如下:
```
CREATE TABLE `user` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`avatar` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
INSERT INTO `user` (`id`, `avatar`) VALUES (1, 'http://localhost:8080/images/default.jpg');
```
然后我们可以创建一个UserService类,包含updateAvatar方法,将用户头像地址更新到数据库中。代码如下:
```
@Service
public class UserService {
@Autowired
private JdbcTemplate jdbcTemplate;
public void updateAvatar(String avatarUrl) {
jdbcTemplate.update("UPDATE user SET avatar = ? WHERE id = 1", avatarUrl);
}
}
```
最后我们需要在UploadController中调用UserService的updateAvatar方法,将头像地址保存到数据库中。代码如下:
```
@RestController
public class UploadController {
@Autowired
private UserService userService;
@PostMapping("/upload")
public Map<String, String> upload(@RequestParam("file") MultipartFile file) throws IOException {
File saveFile = new File("D:/images/" + file.getOriginalFilename());
file.transferTo(saveFile);
String avatarUrl = "http://localhost:8080/images/" + file.getOriginalFilename();
userService.updateAvatar(avatarUrl);
Map<String, String> result = new HashMap<>();
result.put("url", avatarUrl);
return result;
}
}
```
到此为止,我们就完成了uniapp微信小程序换头像、MySQL和Springboot后端的实现。
阅读全文