Springboot入门教程（6）-上传图片并返回URL

Web开发中支持用户上传图片并显示出来是不可或缺的一个功能，本篇教程将讲述Springboot搭建的后台服务器如何接收前端上传的图片并将图片显示的url返回给前端。
首先需要在application.properties中添加一些配置

# 设置单个文件最大内存
multipart.maxFileSize=50Mb
# 设置所有文件最大内存
multipart.maxRequestSize=50Mb
# 自定义文件上传路径
web.upload-path=F:/work/images/
# 显示图片的路径
web.image-path=http://localhost:8080/images/

接着来写一个上传文件的工具类，在utils的工具包下创建一个FileUtil.java

import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

public class FileUtil {
    /**
     * 获取文件后缀
     * @param fileName
     * @return
     */
    public static String getSuffix(String fileName){
        return fileName.substring(fileName.lastIndexOf("."));
    }

    /**
     * 生成新的文件名
     * @param fileOriginName 源文件名
     * @return
     */
    public static String getFileName(String fileOriginName){
        return getUUID() + getSuffix(fileOriginName);
    }

    public static String getUUID(){
        return UUID.randomUUID().toString().replace("-", "");
    }

    /**
     *
     * @param file 文件
     * @param path 文件存放路径
     * @param fileName 源文件名
     * @return
     */
    public static String upload(MultipartFile file, String path, String fileName){
        String newFileName = getFileName(fileName);
        // 生成新的文件名
        String realPath = path + newFileName;

        //使用原文件名
//        String realPath = path + "/" + fileName;

        File dest = new File(realPath);

        //判断文件父目录是否存在
        if(!dest.getParentFile().exists()){
            dest.getParentFile().mkdir();
        }

        try {
            //保存文件
            file.transferTo(dest);
            return newFileName;
        } catch (IllegalStateException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return null;
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return null;
        }

    }
}

这个工具类参考了基于SpringBoot的图片上传与显示(付源码)。这个类的作用是把接收到的文件名替换成一个不会重复的UUID，为的是防止上传的图片有重名。然后把接收到的图片文件保存到上面配置的目标目录下面。
接下来为了通过url显示图片，我们需要配置ResourceHandlerRegistry，来使我们能通过程序直接访问保存在磁盘上的文件，即用户上传的图片文件。把之前创建的WebConfigurer类中的代码修改如下

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfigurer implements WebMvcConfigurer {

    @Autowired
    private TokenInterceptor loginInterceptor;
    @Value("${web.upload-path}")
    private String mImagesPath;

    // 这个方法用来注册拦截器，我们自己写好的拦截器需要通过这里添加注册才能生效
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(loginInterceptor).addPathPatterns("/**").excludePathPatterns("/login", "/register", "/images/**");
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/images/**").addResourceLocations("file:" + mImagesPath);
    }
}

其中addResoureHandler指的是对外暴露的访问路径，addResourceLocations是文件保存的路径，因为是本地磁盘的路径，所以注意"file:"不能少。这样，我们就可以通过http://localhost:8080/images/xxxxx.jpg来查看图片了。另外在excludePathPatterns中也添加了图片的路径，不做登录拦截。

最后我们要写两个接口来测试这个上传图片并显示的功能，一个接口是用于增加一条教师的数据teacher/addTeacher，另一个接口用于获取一条教师的数据teacher/teacherDetail。写接口的方式我之前的教程的教程Springboot入门教程（2）-结合MyBatis进行增删改查已经详细讲述过了，这边就简单放一下代码。
teacher的数据库表如下图创建

teacher表

Teacher.java实体类

public class Teacher {
    private Long id;
    private String name;
    private Integer gender;
    private Integer age;
    private String imageUrl;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getGender() {
        return gender;
    }

    public void setGender(Integer gender) {
        this.gender = gender;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public void setImageUrl(String imageUrl) {
        this.imageUrl = imageUrl;
    }

    public String getImageUrl() {
        return imageUrl;
    }

}

TeacherMapper.java接口

public interface TeacherMapper {
    void insertTeacher(@Param("teacher") Teacher teacher);
    Teacher findTeacherById(@Param("id")Long id);
}

TeacherMapper.xml

    
        
        
        
        
        
    
    
        select
        id,
        name,
        gender,
        age,
        image_url
        from teacher T
        where id = #{id}
    
    
        insert into teacher (name,gender,age, image_url) values(#{teacher.name},#{teacher.gender},#{teacher.age},#{teacher.imageUrl})
    

TeacherController.java

import com.example.schoolmanager.entity.ResponseData;
import com.example.schoolmanager.entity.Teacher;
import com.example.schoolmanager.mapper.TeacherMapper;
import com.example.schoolmanager.utils.FileUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

@RestController
@RequestMapping(value = "/teacher")
public class TeacherController {
    @Autowired
    TeacherMapper teacherMapper;
    @Value("${web.upload-path}")
    private String path;
    @Value("${web.image-path}")
    private String imagePath;

    @PostMapping(value = "/addTeacher")
    @ResponseBody
    public ResponseData addTeacher(final String name, final String age, Integer gender,
                            @RequestParam(value = "file", required = false) MultipartFile file)
    {
        Teacher teacher = new Teacher();
        if(file != null){
            String fileName = FileUtil.upload(file, path, file.getOriginalFilename());
            if ( fileName!= null){
                teacher.setImageUrl(fileName);
            }
        }
        teacher.setName(name);
        teacher.setAge(Integer.valueOf(age));
        teacher.setGender(gender);
        teacherMapper.insertTeacher(teacher);
        ResponseData responseData = ResponseData.ok();
        return responseData;
    }

    @RequestMapping(value = "/teacherDetail")
    public ResponseData findTeacherDetail(Long id){
        Teacher teacher = teacherMapper.findTeacherById(id);
        String imageUrl = teacher.getImageUrl();
        if(imageUrl != null){
            teacher.setImageUrl(imagePath + imageUrl);
        }
        ResponseData responseData = ResponseData.ok();
        responseData.putDataValue("teacher", teacher);
        return responseData;
    }
}

其中访问addTeacher接口时，file是可选参数，所以设置了required为false，当不上传文件时，可以像之前创建的普通post请求一样访问。在新建一条教师数据时，我们把保存的图片文件名保存到了数据库，当用户访问teacherDetail获取教师数据时，我们把放在配置文件中的对外访问路径拼接到文件名之前，返回给前端完整的图片访问路径。

完成这些之后就可以启动项目了。依旧可以用postman测试，新增教师结果如下

访问addTeacher接口

获取教师详情结果如下

访问teacherDetail接口

查看图片

代码依旧可以参考我在github上面的代码https://github.com/ahuadoreen/studentmanager，图片上传的代码已更新。