博客

项目需求

最近做软件架构平台的课程实验时遇到这样的一个问题。需求是要修改商品的图片，完成图片的上传，这本身并不难，使用

form-data

的格式进行交互就能完成。但是上传后无法立马访问到才是最头疼的问题。

一开始选择是将图片存到static目录下面，当作静态文件处理，但是后面发现，只有

重启项目

后，静态文件加载到

target

中才能访问到。

找了很多解决办法，最终找到了合适的方案。

springboot静态文件讲解

springboot的静态文件根据需求我们可以分成两种

• 
  恒不变
  
  的项目静态文件static：
  
  这种类型的文件是
  
  项目建立初就不会变动
  
  的文件，典型的有各种各样的UI库，
  
  bootstrap
  
  ，
  
  jquery
  
  ，还有
  
  项目的图标
  
  等等。
  
  这些文件最终会被加载到项目的
  
  target目录
  
  下，作为类似项目的依赖包持续使用，差不多和maven依赖包一样。
  
  
  
  
  
  target目录下的文件不需要进行任何配置尽可以通过域名加目录直接访问到。如localhost:8080/echarts/echarts.min.js
  
  

• 持续
  
  上传更新
  
  的文件file:
  
  这一类文件是保存在系统
  
  服务端的数据文件
  
  ，会不断的收到用户和管理员的
  
  CRUD操作
  
  处理，典型的有
  
  系统文档
  
  ，
  
  商品图片
  
  等等。
  
  这些文件仅保存在服务端，但是不会进入项目目录下，更不会加载到target中。

上传文件

根据上面的描述，我们很清楚我们需要解决的就是如何存储

持续上传更新的文件

，以及如何才能访问的到。

写一个上传文图片的接口，并将图片保存到本地的目录项

public class Constant {
    public static final String ITEM_PICTURE_PATH = "D:\\Tools\\";
}

    @PostMapping("/importPicture")
    public MsgEntity importPicture(@RequestParam("file") MultipartFile file, @RequestParam("id") String id) throws FileNotFoundException {
        //获得文件的后缀
        String filename = UUID.randomUUID() + Objects.requireNonNull(file.getOriginalFilename()).substring(file.getOriginalFilename().lastIndexOf("."));
        //获取文件存储路径
        File filepath = new File(Constant.ITEM_PICTURE_PATH + filename);
        String url = String.valueOf(filepath);
        try {
            //存文件
            file.transferTo(filepath);
        } catch (IOException e) {
            e.printStackTrace();
        }
        itemService.setPictureUrl("http://localhost:8080/temp-image/" + filename, id);
        return new MsgEntity("SUCCESS", "200", url);
    }

访问文件

上传文件已经完成了，那么如何访问到存储在本地服务器的文件呢？

其实SpringBoot已经很好的为我们解决了这个问题，我们只需要加上一点配置，就能将

本地文件映射到url路径

上。

在properties中加上自定义配置

# 配置上传图片的路径和访问图片图片的路径
upload.file.location=file:D:/Tools/
upload.file.path =/temp-image/**

编写WebMvcConfig的配置类

@Configuration
public class MyWebAppConfigurer implements WebMvcConfigurer {
    @Value("${upload.file.location}")
    private String fileLocation;
    @Value("${upload.file.path}")
    private String filePath;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
		//注册配置类，使用addResourceHandlers方法，将本地路径fileLocation映射到filePath路由上。
        registry.addResourceHandler(filePath).addResourceLocations(fileLocation);
        WebMvcConfigurer.super.addResourceHandlers(registry);
    }
}

这样就可以在浏览器上访问了