springboot + uniapp 头像上传和预览功能及样式模版
该头像上传使用 uni.chooseImage 方法从本地相册选择图片或使用相机拍照。
再通过 uni.uploadFile 将本地资源上传到服务器。具体使用方法请参考 uniapp 官网 API。
以下是前端效果图：
上传之后效果
点击头像预览效果
前端代码
确保点击图片仅触发预览功能而不触发 avatarSwitch 函数，可以通过在图片元素上使用 @click.stop 修饰符来阻止事件传播。
<template>
<view class="container">
<view class="avatar-wrap" @click="avatarSwitch">
<text>头像</text>
<view class="avatar-image">
<image :src="avatarUrl" @click.stop="previewImage"></image>
<view class="avatar-symbol">></view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
avatarUrl: '',
}
},
methods: {
avatarSwitch() {
//从相册中选择头像
uni.chooseImage({
success: (res) => {
uni.uploadFile({
//你后端服务器地址
url: `http://localhost:5050/files/file`,
//要上传文件资源的路径
filePath: res.tempFilePaths[0],
//文件对应的名称，与后端接收的属性名一直
name: 'file',
//请求中其他额外的数据
formData: {},
success: (uploadFileRes) => {
this.avatarUrl = uploadFileRes.data;
}
});
}
});
},
//图片的预览
previewImage() {
uni.previewImage({
urls: [this.avatarUrl]
})
}
}
}
</script>
<style lang="scss">
.avatar-wrap {
box-sizing: border-box;
width: 100%;
height: 140rpx;
background-color: #fff;
padding: 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
color: #999;
.avatar-image {
display: flex;
align-items: center;
image {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.avatar-symbol {
margin-left: 15rpx;
}
}
}
</style>
后端代码
首先是 application.yml 配置文件，端口号配置的 5050，根据你的需求更改。
自定义文件的存放位置：file:path: D://uploadPath/images/。
# 端口号
server:
port: 5050
spring:
# 文件上传配置
servlet:
multipart:
#是否开启文件上传支持，默认是 true
enabled: true
#文件写入磁盘的阈值，默认是0
file-size-threshold: 0
# 设置单个文件的最大尺寸
max-file-size: 10MB
# 设置请求的最大尺寸
max-request-size: 100MB
# 自定义图片存放位置
file:
path: D://uploadPath/images/
controller 控制层代码
package com.test.blog.controller;
import jakarta.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
@RestController
@RequestMapping("/files")
public class FilesUnloadController {
// 文件上传路径
@Value("${file.path}")
private String filePath;
// 单文件上传
@RequestMapping("/file")
public String upload(@RequestParam MultipartFile file, HttpServletRequest request) {
// 获取服务器路径
String serverPath = request.getScheme() + "://" + request.getServerName()
+ ":" + request.getServerPort();
// 获取文件名
String fileName = file.getOriginalFilename();
// 保存文件
File newFile = new File(filePath + '\\' + fileName);
// 获取文件url
String url = serverPath + "/images/" + fileName;
// 判断父级文件目录是否存在，不存在则创建
if (!newFile.getParentFile().exists()) {
newFile.getParentFile().mkdirs();
System.out.println("父级文件目录不存在，已创建目录");
}
try {
// 保存文件
file.transferTo(newFile);
System.out.println("文件上传成功");
} catch (IOException e) {
// 程序错误
e.printStackTrace();
System.out.println("程序错误，请重新上传");
}
// 返回文件 url
return url;
}
}
添加一个配置类，将静态文件映射位置映射出去，可以通过 url 访问。
package com.test.blog.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class MyWebMvcConfig implements WebMvcConfigurer {
// 设置静态资源映射
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/images/**").addResourceLocations("file:D:/uploadPath/images/");
}
}