springboot + uniapp 实现单文件上传及图片回显

一、使用 uni-file-picker 组件标签

具体使用方法请查看 uniapp 官网 uni-file-picker 的介绍。

前端代码

代码如下，通过 uni.uoloadFile 上传到后端返回 url 地址赋值 value 进行图片回显。

<template>
	<view class="container">
		<uni-file-picker file-mediatype="image" mode="grid" @select="select" />
		<!-- 图片上传 -->
		<image :src="value" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                value: ''
			}
		},
		methods: {
			select(e) {
				uni.uploadFile({
					url: `http://localhost:5050/files/file`,//你后端服务器地址
					filePath: e.tempFilePaths[0],//要上传文件资源的路径
					name: 'file',//文件对应的名称，与后端接收的属性名一直 
					formData: {},//请求中其他额外的数据
					success: (uploadFileRes) => {
						this.value = uploadFileRes.data;
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #fff;
		position: fixed;
	}
</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/");
    }
}

二、使用 uni.chooseImage 接口

通过 uni.chooseImage 接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。

具体使用方法请查看 uniapp 官网 uni.chooseImage 的介绍。

后端代码与（一）中一致，前端代码如下：

<template>
	<view class="container">
		<!-- 图片上传 -->
		<image :src="value" mode=""></image>
		<button @click="uploadFile">图片上传</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: ''
			}
		},
		methods: {
			uploadFile() {
                //从本地相册选择图片或使用相机拍照。
				uni.chooseImage({
					success: (chooseImageRes) => {
                        uni.uploadFile({
							url: `http://localhost:5050/files/file`,//你后端服务器地址
							filePath: chooseImageRes.tempFilePaths[0],//要上传文件资源的路径
							name: 'file',//文件对应的名称，与后端接收的属性名一直 
							formData: {},//请求中其他额外的数据
							success: (uploadFileRes) => {
								this.value = uploadFileRes.data;
							}
						});
					}
				});
			},	
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #fff;
		position: fixed;
	}
</style>