SpringBoot集成百度UEditor图片上传后直接访问404解决办法

SpringBoot项目上传图片一般是上传至远程服务器存储,开发过程中可能会上传至当前项目的某个静态目录中,此时就会遇到这个问题,文件在上传之后直接访问并不能被访问到,必须重新加载项目。

首先分析一下原因:

我们知道,如果使用类似 /upload/image/1.jpg 这种格式进行图片的访问的时候,SpringBoot读取的并不是本项目中直接的静态目录,而是在进行编译的时候生成target目录下的文件,如下图所示:

那么问题就来了,我们在运行的过程中上传一个图片的话,并不能重新加载当前这个项目,也就是target目录下的文件一直是之前的文件,尽管有人说我进行了SpringBoot热部署(dev-tools),能够自动重新加载项目,但是问题是热部署也需要一定的时间去分析和重新加载项目,所以上传文件后直接进行访问肯定就不能实现了。

简单来说:文件只是单纯的上传到项目的文件夹中,并没有在target目录下生成对应的文件,导致访问不到。

在网上看了一个博客,说可以在将文件复制到本地的时候也将文件复制到项目的target目录下,这样就可以访问了,听着也非常的有道理,但是实践出真知,经过我的测试,并不能实现,不知道是因为我的问题还是什么,所以并不推荐大家使用这个方法,当然感兴趣的也可以测试一下,毕竟这个听着是真的很有道理。

解决办法:配置映射路径拦截器,将虚拟路径映射为真是图片地址,达到回显的目的(已测试,有效)

简单来说就是将UEditor要访问的路径映射成为本地的路径,废话不多说直接上代码:
注:SpringBoot1版本是extends WebMvcConfigurerAdapter类,SpringBoot2版本是implements WebMvcConfigurer,这个地方有点不一样

1    @Override
2     public void addResourceHandlers(ResourceHandlerRegistry registry){
3          registry.addResourceHandler("swagger-ui.html").addResourceLocations("classpath:/META-INF/resources/");
4          registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
5          registry.addResourceHandler("/static/ueditor/**").addResourceLocations("classpath:/static/ueditor/");
6          registry.addResourceHandler("/public/**").addResourceLocations("classpath:/public/");
7          registry.addResourceHandler("/static/upload/image/**").addResourceLocations("file:" + UploadUtils.getImgDirFile().getAbsolutePath() + "/");  //添加这一行
8     }

UploadUtils.java

public class UploadUtils {

    // 项目根路径下的目录  -- SpringBoot static 目录相当于是根路径下(SpringBoot 默认)
    public final static String IMG_PATH_PREFIX = "static/upload/image";

    public static File getImgDirFile(){

        // 构建上传文件的存放 "文件夹" 路径
        String fileDirPath = new String("src/main/resources/" + IMG_PATH_PREFIX);

        File fileDir = new File(fileDirPath);
        if(!fileDir.exists()){
            // 递归生成文件夹
            fileDir.mkdirs();
        }
        return fileDir;
    }

}

重点在于getAbsolutePath()方法,这个函数的作用是获取当前项目在当前运行环境下的绝对路径,如我现在在开发过程中获得的结果就是D:\WorkSpace\IDEA-WorkSpace\......

设置完毕之后就可以正常显示了。

注:如果你所使用的是SpringBoot多模块项目,那么通过这个方法获取到的往往是父项目所在的地址,因此也会出现问题,解决这个问题的办法是配置当前项目启动类的工作环境是在具体的某个项目

   

设置完毕后即可解决这个问题

附:之前在说这个问题的时候,也有人给我提了一个建议,就是不将图片放置在项目中,而是放置在某个固定的盘符中,这样返回请求路径的时候直接请求本地地址,等将来发布到服务器的时候使用Nginx。

不过问题是我对Nginx并不是很了解,所以等我学会了Nginx之后再来完善这个博客吧,你们可以先替我试试好不好用。【手动滑稽】

原文地址:https://www.cnblogs.com/guo-xu/p/11823848.html

时间: 2024-11-23 01:41:26

SpringBoot集成百度UEditor图片上传后直接访问404解决办法的相关文章

angularjs图片上传后不刷新的解决办法

刚接触angularjs在使用的过程中遇到这个问题 首先我们的图片地址是根据ID来获取的,所以用了指令来完成图片的绑定 .directive("cImg", ['appUrl', function (appUrl) { return { restrict: 'A', link: function (scope, element, attrs) { var url = appUrl+ "/GetImgUrl"; var para = { id: attrs.id};

百度Ueditor 图片上传无反应,显示上传0张,不能点确定

解决办法: \Data\Ueditor\php\Uploader.class.php 190行左右 /** * 获取文件扩展名 * @return string */ private function getFileExt() { date_default_timezone_set("PRC"); return strtolower( strrchr( $this->file[ "name" ] , '.' ) ); } 添加了date_default_tim

百度UEditor图片上传、SpringMVC、Freemarker、Tomcat、Nginx、静态资源

个人官网.公司项目都需要 可视化编辑器,百度UEditor做得很不错,就用的这个.项目后台用到了SpringMVC.Freemarker,开发过程中部署在Jetty,线上部署用Tomcat,最后可能配置Nginx代理.     在实际使用过程中,遇到了太多的问题,因此有必要梳理和总结下. 1. 先说百度UEditor在Java环境中的使用:1.1   Html页面或者Freemarker模版里,引入百度UEditor的相关JS和CSS,如下 <script type="text/javas

from表单文件上传后页面跳转解决办法

from表单上传文件,路径跳转后,又不能转发回来. 本人的一个解决办法是.返回一段html代码,浏览器解析后后退一步,回到原来的页面并刷新. return "<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"/></head><body onload='JavaScript:history.

Asp.net MVC利用WebUploader上传大文件出现404解决办法。

刚开始我上传小文件都是比较顺利的,但是上传了一个大文件大约有200M的压缩包就不行了.在chrome里面监视发现网络状态是404,我分析可能不是WebUploader的限制,应该是WebConfig限制了文件的大小. 不废话: 这是兼容老版本的配置 <system.web> <!--maxRequestLength就是文件的最大字符数,最大值不能超过2个G左右,executionTimeout是超时时间--> <httpRuntime targetFramework=&quo

ueditor图片上传配置

ueditor图片上传配置文件为ueditor/php/config.json /* 上传图片配置项 */ "imageActionName": "uploadimage", /* 运行上传图片的action名称 */ "imageFieldName": "upfile", /* 提交的图片表单名称 */ "imageMaxSize": 2048000, /* 上传限制大小,单位B */ "ima

图片上传后及时预览

<!DOCTYPE html> <html> <head> <meta content="charset=utf-8" /> <!--设置图片上传后预览的div样式--> <style type="text/css"> *{ float:left; margin:0; } body>div{ width:200px; height:225px; text-align:center; } #

【Servlet】利用Servlet3.0标准与JSTL表达式实现文件上传系统,支持图片上传后显示

伴随着JDK1.6一起出现的Servlet3.0标准,使得JSP的文件上传系统不再艰难,此前在JSP的文件上传系统需要<[Jsp]使用jspsmartupload完成简单的文件上传系统>(点击打开链接)类似这样的插件才能完成的文件上传系统,还不支持中文,使得各位程序猿掏空心思才能解决这个问题.现在Servlet3.0对文件上传的方法进行封装,无须分块就可以实现.而且Servlet3.0还不用类似<[Servlet]最简单的Servlet JavaWeb程序>(点击打开链接)在web

图片上传后即时预览

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> //设置图片上传后预览的div样式 <style type="text/css"> #preview, .img, img { width: 200px; height: 200px; } #