前后端分离之后上传图片如何回显

Question

前后端分离之后上传图片如何回显？

前端代码

后端服务器存储路径

本以为这样可以回显出来，但分离之后好像不行。
前端项目是在8080端口，后端在8090
查了很多资料，没什么头绪，有什么好的解决办法吗？大佬们

Answer 1

关注点分离。

站在前端的角度想，上传一个文件后，这个上传接口应该告诉我是否成功，如果成功这个资源的 URL 是什么。

所以现在的问题是，你这个上传接口有没有返回可用的 URL ，和是否前后端分离没有关系的。告诉 id 然后让前端自己拼 URL 的方式是相对不正确的，前端没必要知道资源被放在了服务器的什么目录下，也没必要知道 URL 怎么用 id 去构造。

Answer 2

你写的是个相对路径。所以他也会指向前端服务器，如果是你说的8080，那就会去前端项目所在的服务器查找。

Answer 3

nginx 动静分离

Answer 4

devServer加个proxy规则

proxy: {
    '/img/*': {
        target: 'http://backend.com/img'
    }
}

建议图片上传oss,不要传后端,又费带宽又费容量

Answer 5

@Configuration
public class WebConfig implements WebMvcConfigurer {    
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        //  /**为前端URL访问路径  后面 file:xxxx为本地磁盘映射
registry.addResourceHandler("/**").addResourceLocations("file:/usr/local/src/demo/");
    }
}
//tomcat 是可以访问静态资源的，如果不知道默认路径，可以修改路径 
//.jar文件 放在 ../demo/下