文件上传

Spring Boot代码

1. 代码结构：
   

2. Controller层

   package com.yqifei.upload.controller;import io.swagger.annotations.Api;
   import org.springframework.web.bind.annotation.*;
   import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest;
   import java.io.File;
   import java.io.IOException;
   import java.util.ArrayList;
   import java.util.List;
   import java.util.UUID;/*** @ClassName UploadController* @Description TODO* @Author jiangyuntao* @Data 2023/3/7 23:52* @Version 1.0* @Email yuntaojiang@foxmail.com*/@RestController
   @CrossOrigin
   @RequestMapping("/posts")
   @Api(tags = "文件上传控制器")
   public class UploadController {/*
   http://localhost:8088/swagger-ui.html#
   */@PostMapping(value="/upload")@CrossOriginpublic List fileload(@RequestParam(value = "file") MultipartFile[] file, HttpServletRequest request) throws IOException {System.out.println(file.length);String savaLaction="d:/data/";String fileSaveName;List imageUri = new ArrayList<>();for (MultipartFile multipartFile:file) {System.out.println("文件"+multipartFile.getOriginalFilename());fileSaveName = UUID.randomUUID().toString()+multipartFile.getOriginalFilename();multipartFile.transferTo(new File(savaLaction,fileSaveName));String res = request.getScheme()+"://"+request.getServerName()+":"+"8080"+savaLaction+"/"+fileSaveName;imageUri.add(res);}System.out.println(imageUri);return imageUri;}}

3. 跨域拦截器配置

   package com.yqifei.upload.utils;import org.springframework.context.annotation.Configuration;
   import javax.servlet.*;
   import javax.servlet.annotation.WebFilter;
   import javax.servlet.http.HttpServletResponse;
   import java.io.IOException;
   @WebFilter(filterName = "CorsFilter")
   @Configuration
   public class CorsFilter implements Filter {@Overridepublic void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse) res;response.setHeader("Access-Control-Allow-Origin","*");response.setHeader("Access-Control-Allow-Credentials", "true");response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");response.setHeader("Access-Control-Max-Age", "3600");response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");chain.doFilter(req, res);}
   }

4. application.properties配置

   # 应用名称
   spring.application.name=upload
   # 应用服务 WEB 访问端口
   server.port=8088spring.web.resources.static-locations=file:d:/data/spring.servlet.multipart.max-request-size=50MB
   spring.servlet.multipart.max-file-size=50MB
   

5. 前端页面

   
   Multiple File Upload
   Upload
   图片返回值地址：
   
   

6. 效果展示

   

7. 获取图片的url并且读取图片
   

   1. 修改tomcat的server.xml文件

      

      加上下面这句

      
      // 	docBase代表文件路径，path是浏览器访问时的路径。
      // 若自己创建的文件夹在tomcat目录的webapps中,不同之处： docBase直接写文件夹文字即可（注意：没有/） 例如 docBase ="home/springbootVue/files"