SpringBoot+Vue多图片上传和展示（二）
站长
· 阅读数 30
👨💻作者简介：全干的java博主
🎟️个人主页：无所谓^_^
ps：点赞是免费的，却可以让写博客的作者开心好几天😎
前言
我们已经完成了前端工程页面的编写，这里废话就不多说了，我们来写后端接口
项目下载： gitee：gitee.com/wusupweilgy…
一、后端实现
1.创建工程
创建springboot工程，然后引入以下依赖即可
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpcore</artifactId>
<version>4.4.12</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.83</version>
</dependency>
</dependencies>
依赖说明：
- httpcore：项目中我加入了R类，统一返回结果工具类，里面用到了一些Http状态码。
- fastjson：R类需要将数据转换为json返回给前端，所以用了这个依赖
- commons-lang3：给图片起随机名字的时候用到了
RandomStringUtils.random(6, true, true);//生成6个字符的随机串
配置文件application.yml：
# 应用名称
spring:
application:
name: ImageUpload
# 应用服务 WEB 访问端口
server:
port: 8088
#TODO改成你要保存的路径
file:
upload:
path: E:\Java\springboot-vue\image\imageupload_file\
2.编写controller
接下来，在FileController中编写图片上传接口，这里的逻辑是：
- 获取服务器保存图片的路径，如果路径中文件夹不存在，就创建该文件夹
- 对参数进行校验，判断前端传过来的图片是否为空
- 不为空就循环遍历图片数组，获取图片的后缀名，再与生成的6位的随机字符串拼接在一起，存入服务器
@Value("${file.upload.path}")
private String fileUploadPath;
@PostMapping("/file")
public R uploadFile(@RequestParam("files") MultipartFile[] multipartFiles) throws IOException {
String parentFile = fileUploadPath;//服务器保存图片的路径
//如果父文件夹不存在，就创建
File parent = new File(parentFile);
if (!parent.getParentFile().exists()) {
parent.mkdirs();
}
if(multipartFiles == null){
return R.error("文件为空");
}
for (MultipartFile file : multipartFiles) {
String filename = file.getOriginalFilename(); //获取上传图片的文件名，包含后缀
String suffixName = filename.substring(filename.lastIndexOf("."));//图片后缀
String randomFileName = RandomStringUtils.random(6, true, true);//生成6个字符的随机串
String nowName = randomFileName + suffixName;//最后保存在服务器时的文件名
File file1 = new File(parent, nowName);
//将图片保存入服务器
file.transferTo(file1);
}
}
获取图片列表接口编写，这里给前端返回url，然后配置跨域和静态资源映射，前端就能通过这个url路径访问了
@GetMapping("/filelist")
public List<String> getURL() {
String parentFile = fileUploadPath;//服务器保存图片的路径
ArrayList<String> urls = new ArrayList<>();
File file = new File(parentFile);
File[] list = file.listFiles();
if (list == null) {
return null;
}
for (File s : list) {
urls.add("http://localhost:8088/file/" + s.getName());
}
return urls;
}
3.WebMvc配置
配置了跨域和静态资源映射
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class MyWebConfigurer implements WebMvcConfigurer {
@Value("${file.upload.path}")
private String fileUploadPath;
//静态资源映射
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/file/**").addResourceLocations("file:" + fileUploadPath);
}
//跨域配置
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowCredentials(true)
.allowedOrigins("http://localhost:8080")
.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
.allowedHeaders("*");
}
}
4.其他
为了显的项目更完整一点，我加了统一结果返回类和全局异常处理类，这里粘一下具体代码
统一结果返回类：
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.TypeReference;
import org.apache.http.HttpStatus;
import java.util.HashMap;
import java.util.Map;
/**
* 返回数据
*
* @author Mark sunlightcs@gmail.com
*/
public class R extends HashMap<String, Object> {
private static final long serialVersionUID = 1L;
public R setData(Object data) {
put("data",data);
return this;
}
//利用fastjson进行反序列化
public <T> T getData(TypeReference<T> typeReference) {
Object data = get("data"); //默认是map
String jsonString = JSON.toJSONString(data);
T t = JSON.parseObject(jsonString, typeReference);
return t;
}
public R() {
put("code", HttpStatus.SC_OK);
put("msg", "success");
}
public static R error() {
return error(HttpStatus.SC_INTERNAL_SERVER_ERROR, "未知异常，请联系管理员");
}
public static R error(String msg) {
return error(HttpStatus.SC_INTERNAL_SERVER_ERROR, msg);
}
public static R error(int code, String msg) {
R r = new R();
r.put("code", code);
r.put("msg", msg);
return r;
}
public static R ok(String msg) {
R r = new R();
r.put("msg", msg);
return r;
}
public static R ok(Map<String, Object> map) {
R r = new R();
r.putAll(map);
return r;
}
public static R ok() {
return new R();
}
public R put(String key, Object value) {
super.put(key, value);
return this;
}
public Integer getCode() {
return (Integer) this.get("code");
}
}
全局异常处理类：
import com.wusuowei.lgy.utils.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;
import java.io.IOException;
@Slf4j
@RestControllerAdvice
public class GlobalExceptionHandler {
@ExceptionHandler(value = RuntimeException.class)
public R handler(RuntimeException e){
log.error("运行时异常：---------{}"+e.getMessage());
return R.error(e.getMessage());
}
@ExceptionHandler(value = IOException.class)
public R fileHandler(RuntimeException e){
log.error("文件上传异常：---------{}"+e.getMessage());
return R.error("文件上传异常");
}
}
二、踩坑
到这，这个项目就完成了，可以运行看有没有错误（应该不会报错，毕竟我踩了很多坑了😭），如果报红的话，可以第一时间查询资料，或者来评论区跟我唠唠😉。最后再总结我遇到了哪些坑吧！
- element-ui的文件上传组件默认是一张图片请求服务器一次，所以不能用它的submit提交，需要自己封装请求
- 跨域配置里，allowedOrigins("http://localhost:8080")这个不能写成"*"，因为allowedOrigins、allowCredentials一般为一对出现，如果设置了allowCredentials(true)，表示允许证书，这时allowedOrigins就不能写通配符"*"了，而需要枚举出所有固定的域来告知可跨域的范围。
- @RequestParam("/files")将请求绑定到控制器的方法参数上，建议小伙伴们看看@RequestParam、@RequestBody以及@PathVariable去区别 三者区别
小结
本文介绍了如何使用SpringBoot创建一个简单的图片上传和展示后台接口。希望本文可以帮助你进一步学习和掌握这个技术。如果这篇文章有幸帮助到你，希望读者大大们可以给作者给个三连呀😶🌫️😶🌫️😶🌫️
转载自:https://juejin.cn/post/7341962661826396211