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/");
    }
}