SpringBoot configures the virtual path for image access

Recording a note on configuring virtual paths to access pictures in SpringBoot The
recently written projects all need to access pictures, and mine is a project implemented by the spring+springMVC+Mybatis framework, and the pictures are already used when using the ssm framework The virtual path of access is used for access. The ssm configuration virtual path is actually the image access configured on Tomcat, and SpringBoot is built-in Tomcat, so how should it be configured? See the figure below,
first configure the image upload path

This is the code snippet of the jsp page

  <div class="layui-form-item">
        <label class="layui-form-label">简介图片</label>
        <div class="layui-upload layui-input-block">
            <button type="button" class="layui-btn" id="SingleUpload">
                <i class="layui-icon layui-icon-upload"></i> 上传图片
            </button>
            <img id="simpleImg" width="60px" height="60px">
        </div>
    </div>

js code snippet

 upload.render({
    
      //这里是上传一张图片
        elem: "#SingleUpload",
        url: ctx + "/book/SingleUpload",
        done: function (res, index, upload) {
    
    
            //假设code=0代表上传成功
            if (res.code == 0) {
    
    
                layer.msg("简介图片加载成功!", {
    
    icon: 1});
                $("#simpleImg").attr("src", res.image);
                $("#SingleUpload").addClass("layui-btn-disabled");
                $("#SingleUpload").off("click");
            }
        }
    });

Next is the specific configuration in the Controller

  private String simplePath = "D:/uploadLibrary/";
    // 详细图片地址
    private StringBuilder detailsPath = new StringBuilder();

 @RequestMapping("/SingleUpload")
    @ResponseBody
    public Map<String, Object> SingleUpload(@RequestParam("file") MultipartFile file, HttpServletRequest req,
                                            HttpSession session) {
    
    
        Map<String, Object> map = new HashMap<String, Object>();
        try {
    
    
            String suffixName = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
            String filename = UUID.randomUUID() + suffixName;
            File filePath = new File(dirPath);
            if (!filePath.exists()) {
    
    
                filePath.mkdirs();
            }
            //创建虚拟路径存储
            simplePath = req.getServletContext().getContextPath() + "/file/" + filename;
            // simplePath = filename;
            map.put("image", simplePath);
            file.transferTo(new File(dirPath + filename));
            map.put("code", 0);
            map.put("msg", "上传成功");
        } catch (Exception e) {
    
    
            map.put("code", 1);
            map.put("msg", "上传失败");
            e.printStackTrace();
        }
        return map;
    }

The image path stored in the database
insert image description here
After everything is set up, you need to configure the virtual path for SpringBoot to access the image. Create a
new config control class and create a new class method WebMvcConfig in it to configure the virtual path for the image.
Specific code

package com.book.libratyman.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 WebMvcConfig implements WebMvcConfigurer {
    
    
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
    
    
        registry.addResourceHandler("/file/**").addResourceLocations("file:D:/uploadLibrary/");
    }
}


addResourceHandler("/file/**") is the path where I access the image in the project, which is the image storage path in the data, and addResourceLocations("file:D:/uploadLibrary/") is the real path where I upload the image. The real path to upload images is **D:/uploadLibrary/** After configuration, you can access the project images by running the project.

insert image description here
insert image description here
The picture shows that it has been configured successfully! ! ! ! !

Guess you like

Origin blog.csdn.net/m0_46590717/article/details/122993317
Recommended