无法从 React 前端访问上传的图像到 Spring Boot 后端

在花费了大量时间之后，我终于解决了我的问题。而且我真的了解静态和动态资源在 Spring Boot 中是如何工作的。这真的很容易，但不幸的是，我从谷歌得到的大部分答案都非常令人困惑和误导。

所以这是解决方案：

我们在应用程序中提供两种类型的静态内容：

first：当应用程序在网络服务器上运行时我们不会更新的内容，例如：| .css | .js | .html | 文件， 和

第二：图像，例如| .jpg | .png | .jpeg | .svg | 我们主要是要更新或想要动态行为。 例如：上传个人资料图片或更改您网站的封面图片或英雄图片、博客文章图片。

所以在 Spring-Boot 应用程序中。 对于第一部分：我们将把我们的| .css | .js | /src/main/resources/static/ 文件夹中的 .html | 文件。因此，当我们将项目构建到 jar 文件中时，它会自动复制这些文件并将它们放入“/target/classes/static/” >”文件夹。当您运行服务器时，您将能够在字体端应用程序 (ReactJS) 中看到这些静态内容。

现在对于第二部分，您需要进行一些配置。您需要创建一个类来实现一个名为 WebMvcConfigurer 的接口。

@Configuration
public class StaticConfig implements WebMvcConfigurer {
    @Override
    public void addresourceHandlers(resourceHandlerRegistry registry) {
        registry.addresourceHandler("/uploads/**")
                .addresourceLOCATIOns("file:" + System.getProperty("user.dir") + "/uploads/");
    }
}

这里我将我的图片保存在：

"/Users/{your_computer_namE}/{proj_namE}/uploads/" 文件夹

这就是我把它放在 addresourceLOCATIOns 中的原因。我使用了绝对路径。但是你也可以像这样使用相对路径：

registry.addresourceHandler("/uploads/**").addresourceLOCATIOns("file:uploads/");

它将相对于您的“.jar”文件位置搜索您上传的图片。

之后，如果您构建 jar 文件并使用终端或任何 IDE 运行它，您将能够直接从 http://localhost:8080 访问您上传的图像/uploads 并将其显示在您的前端应用程序中，而无需刷新您的网页或重新启动服务器。

注意：如果您在 addresourceLOCATIOns 中使用相对路径，请确保您上传的图片文件夹与您的 jar 文件相关，否则会显示 404 Not Found 在您的浏览器控制台中。

假设您的 jar 文件位于“目录”文件夹中，因此您上传的图像文件夹应位于此“目录”文件夹中

/目录
....spring_boot_app.jar
..../上传
........头像.jpg