vue+springboot图片上传，addResourceHandlers调用无效

当vue前端上传一张图片到sptingboot后台文件夹下的时候，需要重启启动后台项目，才可以在浏览器中访问刚刚上传的这张图片，如在浏览器输入：

http://localhost:8188/123.jpg

123.jpg前面都是你后台项目的访问路径，因为你的图片已经保存到后台了，所以通过http://localhost:8188+图片名称就可以访问图片，解决的方法就是写一个配置类，如下，但是配置完之后还是调用不了，证明addResourceHandlers调用无效

项目文件目录：

配置类代码：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class MyPicConfig implements WebMvcConfigurer {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/upload/**").addResourceLocations("file:E:/NodeDemo/resources/static/upload/");}
}

这里讲一下：

1.addResourceLocations("file:E:/NodeDemo/resources/static/upload/")里面的参数必须要写成"file:+路径"的形式，该路径一直到你上传图片的位置
1.addResourceLocations("file:E:/NodeDemo/resources/static/upload/")路径最后面的斜杠必须加，要不可以测试一下，是不会成功的
2.上传图片的位置不可以是static，要在static下重新创建一个文件夹upload来存放你的图片
3.在浏览器访问图片的时候一定要加上upload，如：http://localhost:8188/upload/123.jpg

如果按照上面的代码运行，addResourceHandlers调用无效那么证明你将上传图片的路径写到了static中而不是static下的upload

vue+springboot图片上传，addResourceHandlers调用无效相关推荐

vue获取上传图片的名字和路径_使用Vue实现图片上传的三种方式
项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务 ...
图片上传（调用微信接口）
图片上传之原生方法图片上传.压缩.回显.缩略图放大.删除.下载,可以参考这儿(h5方法) https://github.com/zhangstar1331/pictureUpload 效果展示背景 ...
vue+vant图片上传压缩图片大小
vue+vant图片上传压缩图片大小可能在项目中大家都会遇到文件上传的需求,比如头像,图片等,但是太大的文件上传会给服务器造成很大大压力,那么我们就需要压缩上传的文件其实这儿所说的压缩,就是图片重 ...
vue中图片上传及回显
在vue中图片上传到服务器下指定路径,并实现根据图片路径调取后台接口返回图片流在vue页面展示图片一.图片上传 1.前台上传 <template slot-scope="scope& ...
vue实现图片上传功能
vue实现图片上传功能一.vue的核心插件 1. vuex 2. vue-router 二.服务器代理配置三.路由配置四.自定义axios 五.请求服务器逻辑六.vuex-store 七.登录 ...
解决决SpringBoot图片上传需重启服务器才能显示的问题
问题描述: 前端页面实现头像图片上传并实时更新显示的功能,但是文件上传成功后不能实时显示,必须重启服务器后才能显示出来下图是我将图片文件上到到的目录,及项目架构问题发生的原因这是服务器的自我保护 ...
SpringBoot 图片上传，预览与下载
引言记录一下图片上传本地,并能在浏览器进行访问的方法配置文件yml # 开发环境配置 server:# 服务器的HTTP端口,默认为8080port: 8099 spring:# IO文件上传配置 ...
Vue实现图片上传功能：
1.前端API: export const commonUpload=obj=>{return request({url:`/api/common/upload`,method:'post',d ...
SpringBoot图片上传失败
版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 问题描述项目执行图片上传时失败,图示如下: 在浏览器中发现了报错信息,图示如下: 错误原因 ...

vue+springboot图片上传，addResourceHandlers调用无效

vue+springboot图片上传，addResourceHandlers调用无效相关推荐

最新文章

热门文章