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

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

首先分析一下原因:

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

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

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

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

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

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

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

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之后再来完善吧,你们可以先替我试试好不好用

以上就是本次介绍的关于SpringBoot图片上传404的全部知识点内容,感谢大家的学习和对我们的支持。

(0)

相关推荐

  • SpringBoot集成阿里云OSS图片上传

    简述 最近做的公司项目,图片比较多,不想给其存储到自己服务器上,就买了阿里云的OSS服务器来哦进行存储,其实集成第三方平台,一般没什么难度,当然,你要仔细看对方的API文档,这篇主要说一下个人集成OSS的过程 步骤 1.pom.xml中添加OSS的SDK <!-- 图片上传 SDK 阿里云oss --> <dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-os

  • SpringBoot图片上传和访问路径映射

    简介 做移动端对接,框架用的SpringBoot,接口RESTful,实现一个图片上传功能,图片上传是个经典的应用场景了,完成后,做个笔记记录一下,希望能帮到攻城狮们 开发步骤 1.先贴图片上传工具类 package com.prereadweb.utils; import java.io.File; import java.io.FileOutputStream; import java.util.UUID; /** * @Description: 文件工具类 * @author: Yangx

  • SpringBoot限制文件或图片上传大小的两种配置方法

    今天做图片上传时候,报了如下错:服务运行异常,Could not parse multipart servlet request; nested exception is java.lang.IllegalStateException: org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: The field file exceeds its maximum permitted

  • 基于SpringBoot实现图片上传与显示

    本文为大家分享了SpringBoot实现图片上传与显示的具体代码,供大家参考,具体内容如下 SpringBoot实现图片上传与显示:Demo地址 效果图预览 思路 一般情况下都是将用户上传的图片放到服务器的某个文件夹中,然后将图片在服务器中的路径存入数据库.本Demo也是这样做的. 由于用户自己保存的图片文件名可能跟其他用户同名造成冲突,因此本Demo选择了使用UUID来生成随机的文件名解决冲突. 但是本Demo不涉及任何有关数据库的操作,便于演示,就用原来的文件名. 步骤 pom相关依赖 基于

  • 如何解决SpringBoot集成百度UEditor图片上传后直接访问404

    SpringBoot项目上传图片一般是上传至远程服务器存储,开发过程中可能会上传至当前项目的某个静态目录中,此时就会遇到这个问题,文件在上传之后直接访问并不能被访问到,必须重新加载项目. 首先分析一下原因: 我们知道,如果使用类似 /upload/image/1.jpg 这种格式进行图片的访问的时候,SpringBoot读取的并不是本项目中直接的静态目录,而是在进行编译的时候生成target目录下的文件,如下图所示: 那么问题就来了,我们在运行的过程中上传一个图片的话,并不能重新加载当前这个项目

  • springboot集成ftp实现文件上传

    本文实例为大家分享了springboot集成ftp实现文件上传的具体代码,供大家参考,具体内容如下 1.FileUtil package io.renren.modules.oss.utils; import org.apache.commons.net.ftp.FTPClient; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Component;

  • Springboot集成阿里云OSS上传文件系统教程

    第一步:开通阿里云OSS服务,创建Bucket,获取id和密钥 第二步:根据官方文档编写上传代码 1.新建maven项目 添加依赖: <!-- 阿里云oss依赖 --> <dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</artifactId> </dependency> <!-- 日期工具栏依赖 --> <

  • ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例

    本文实例讲述了ThinkPHP5+UEditor图片上传到阿里云对象存储OSS.分享给大家供大家参考,具体如下: ThinkPHP5使用富文本UEditor,将富文本编辑框内上传在本地的图片,修改到阿里云对象存储OSS ThinkPHP5加载UEditor ···· 略 UEditor下载:https://ueditor.baidu.com/website/download.html#ueditor (或本站下载:https://www.jb51.net/codes/56667.html) 阿里

  • 解决layui富文本编辑器图片上传无法回显的问题

    layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问题找了好久才找到原来是返回的数据结构不符合layui要求,经过修改才得以解决,现在把代码贴出来共享.加粗字体的代码是返回数据结构 @ResponseBody @RequestMapping(value = "fillupf", method = RequestMethod.POST) pu

  • Spring boot集成Go-FastDFS实现图片上传删除等功能实现

    一.背景 工作中接触到需要采集并管理大量图片的需求,本来是用的FastDFS,但是发现实际情况是在项目实施时难以找到linux服务器去安装FastDFS,所以经过调研,选择了可以在windows服务器上安装部署的Go-FastDFS文件服务器 二.Go-FastDFS简介 go-fastdfs是一个基于http协议的分布式文件系统,它基于大道至简的设计理念,一切从简设计,使得它的运维及扩展变得更加简单,它具有高性能.高可靠.无中心.免维护等优点. 三.安装Go-FastDFS文件服务器 1)下载

  • SpringBoot 集成MongoDB实现文件上传功能

    目录 前言 环境 代码实现 测试 源码 前言 记录下SpringBoot集成MongoDB实现文件上传的步骤 MongoDB - 5.0.6安装包 链接: https://pan.baidu.com/s/1_7nJDe3ndraNyo3vGWOXhg?pwd=i4cv 提取码: i4cv 环境 SpringBoot - 2.5.12MongoDB - 5.0.6 代码实现 pom.xml <dependency> <groupId>org.springframework.boot&

  • 分离与继承的思想实现图片上传后的预览功能:ImageUploadView

    本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图.在实现这个组件的过程中,有用到前面几篇博客介绍的相关内容,比如继承库class.js,任意组件的事件管理库eventBase.js,同时包含进了自己对职责分离,表现与行为分离这两方面的一些思考,欢迎阅读与交流. 演示效果: 注:由于演示的代码都是静态的,所以文件上传的组件是用setTimeout模

  • asp.net core集成kindeditor实现图片上传功能

    本文为大家分享了asp.net core 如何集成kindeditor并实现图片上传功能的具体方法,供大家参考,具体内容如下 准备工作 1.visual studio 2015 update3开发环境 2.net core 1.0.1 及以上版本 目录 新建asp.net core web项目 下载kindeditor 增加图片上传控制器 配置kindeditor参数 代码下载 新建asp.net core web项目 新建一个asp.net core项目,这里命名为kindeditor 选中w

随机推荐