深入解析基于 Spring Boot 和 Element UI 的图片上传全过程

在 Web 开发中，图片上传是一个常见且重要的功能。本文将详细介绍一个基于 Spring Boot 后端和 Element UI 前端框架实现的图片上传功能，包括前端组件的配置、相关方法的调用以及后端的处理过程。

一、前端部分

1. 上传组件配置

在前端页面中，我们使用了 Element UI 的 el-upload 组件来实现图片上传功能。以下是相关的代码片段：

<el-form-item label="一寸照片"  prop="imageUrl1">
    <el-upload
        class="avatar-uploader"
        action="http://localhost:8889/upload/img"
        :show-file-list="false"
        :on-success="handleAvatarSuccess1"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl1!=''" :src="imageUrl1" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon">上传图片</i>
    </el-upload>
</el-form-item>

在上述代码中，我们对 el-upload 组件进行了一系列配置：

• action="http://localhost:8889/upload/img"：指定了上传图片的后端处理接口地址。
• :show-file-list="false"：表示不显示已上传文件的列表。
• :on-success="handleAvatarSuccess1"：定义了上传成功后的回调函数 handleAvatarSuccess1。
• :before-upload="beforeAvatarUpload"：定义了上传前执行的函数 beforeAvatarUpload。

---

2. 上传前的处理函数 beforeAvatarUpload

在上传图片之前，可能需要进行一些前置检查或处理，例如检查文件大小、格式等。以下是一个简单的示例函数：

beforeAvatarUpload(file) {
    const isLt2M = file.size / 1024 / 1024 < 2; 
    if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!');
        return false;
    }
    // 其他的前置处理逻辑
    return true;
}

知识点补充：1MB=1024KB=1024*1024B 1kb=1024字节

file.size 表示文件的大小，单位通常是字节（Byte）——>通过 `file.size / 1024` 将字节转换为千字节（KB）——>再通过 `(file.size / 1024) / 1024` 将千字节转换为兆字节（MB）——>将得到的兆字节大小与 2 进行比较，如果小于 2 ，则 `isLt2M` 的值为 `true`，表示文件大小小于 2MB；否则为 `false` ，表示文件大小大于或等于 2MB 。

---

3. 上传成功的回调函数 handleAvatarSuccess1

当图片上传成功后，后端会返回响应，我们在 handleAvatarSuccess1 函数中处理这个响应：

handleAvatarSuccess1(res, file) {
    console.log(res)
    this.imageUrl1 = res.data
    sessionStorage.setItem("imgUrl1",this.imageUrl1)
}

在这个函数中，我们首先打印出后端返回的响应 res 以便调试。然后，将响应中的数据 res.data 赋值给 imageUrl1 变量，并将其存储在 sessionStorage 中，以便在其他地方使用。

---

二、后端部分

后端使用 Spring Boot 框架来处理图片上传请求。以下是相关的配置和处理代码。

1. 配置 yml.xml中

pictureFile:
  path: "C:/Users/Chenhh/Desktop/lawyer_image/"  # 替换成自己本地文件夹
  path-mapping: "/myImg/"

resources:
  static-locations: classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${pictureFile.path-mapping}

• path: "C:/Users/Chenhh/Desktop/lawyer_image/"：指定了图片实际存储的本地路径。
• path-mapping: "/myImg/"：定义了用于访问图片资源的路径映射。

 

在 resources 部分的 static-locations 配置中：

 

• classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/：这些是常见的静态资源目录路径，用于查找静态文件（如 CSS、JavaScript、图片等）。
• file:${pictureFile.path-mapping}：通过使用 ${pictureFile.path-mapping} 引用了前面定义的图片路径映射，将其作为另一个可能的静态资源位置。

 

这样的配置有助于确保应用能够正确地从指定的位置加载静态资源，包括图片。

2. 配置类:

@Configuration
public class URLConfig implements WebMvcConfigurer {
    @org.springframework.beans.factory.annotation.Value("${pictureFile.path}")
    private String picturePath;

    @Value("${pictureFile.path-mapping}")
    private String picturePath_mapping;

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

• @org.springframework.beans.factory.annotation.Value("${pictureFile.path}") 和 @Value("${pictureFile.path-mapping}") 注解用于从配置文件（如 application.yml 或 application.properties）中获取对应属性的值，并将其注入到 picturePath 和 picturePath_mapping 这两个字符串变量中。

• implements WebMvcConfigurer 表示这个类实现了 WebMvcConfigurer 接口，以便自定义 Spring MVC 的一些配置。

• addResourceHandlers 方法是 WebMvcConfigurer 接口中的一个方法，用于配置静态资源的处理。在这个方法中，通过 registry.addResourceHandler(picturePath_mapping + "**").addResourceLocations("file:" + picturePath); 这行代码，实现了将以 picturePath_mapping 开头的 URL 路径请求映射到本地文件系统中的 picturePath 目录。这意味着当应用接收到匹配该路径模式的请求时，会从指定的本地目录中获取静态资源，例如图片。

---

补充:     WebMvcConfigurationSupport 和 WebMvcConfigurer 都是用于自定义 Spring MVC 配置的，但它们有以下一些区别：

1. 灵活性：

   • WebMvcConfigurer 采用了基于接口的编程方式，提供了一系列的默认方法，您可以选择重写您需要自定义的方法，具有更高的灵活性和可选择性。
   • WebMvcConfigurationSupport 是一个具体的类，如果您继承它，需要小心处理，因为可能会覆盖默认的配置。

2. 配置覆盖：

   • 当使用 WebMvcConfigurer 时，您的自定义配置会与 Spring Boot 自动配置提供的默认配置进行合并。
   • 而继承 WebMvcConfigurationSupport 类并进行配置时，可能会完全覆盖 Spring Boot 为您自动配置的一些默认设置。

3. 推荐使用：

   • 在 Spring Boot 项目中，通常推荐使用 WebMvcConfigurer 接口来进行自定义配置，以避免不必要地覆盖默认配置，并且更符合 Spring Boot 的配置风格和最佳实践。

---

2. 图片上传接口

@PostMapping("/upload/img")
public R upload(MultipartFile file) {
    String fileName = file.getOriginalFilename();  // 获取文件名
    String suffixName = fileName.substring(fileName.lastIndexOf("."));  // 获取后缀名
    fileName = UUIDutilsu.getUUID() + suffixName;  // 生成新的文件名
    File dest = new File(picturePath + fileName);  // 创建文件对象
    if (!dest.getParentFile().exists()) {
        dest.getParentFile().mkdirs();  // 创建父目录（如果不存在）
    }
    try {
        file.transferTo(dest);  // 保存文件
    } catch (IOException e) {
        e.printStackTrace();
    }
    String final_fileName = "http://localhost:8889" + picturePath_mapping + fileName;
    System.out.println(final_fileName);
    return R.success(final_fileName);
}

在这个接口中，首先获取上传文件的原始文件名和后缀名，然后生成一个唯一的新文件名。接着创建一个文件对象，并确保其父目录存在。然后尝试将上传的文件保存到指定的位置，如果保存过程中出现异常则打印异常信息。最后，构建文件的访问路径并返回成功的响应。

通过以上前端和后端的配合，我们就可以实现了一个完整的图片上传功能，用户可以方便地上传图片，并在页面中进行相应的处理和展示。