图片上传到后端，但是再读取图片显示到前端就不显示

2024-01-06 16:43| 来源: 网络整理| 查看: 265

从头开始

前端

// 选择图片显示 function imgChange(obj) { //获取点击的文本框 var file =document.getElementById("file"); var imgUrl =window.URL.createObjectURL(file.files[0]); var img =document.getElementById('imghead'); img.setAttribute('src',imgUrl); // 修改img标签src属性值 }; //因为牵扯到上传图片，form表单一定要有 enctype="multipart/form-data"，因为上传立马显示 //还不经过后端，所以accept="image/*"

当从前端传输到后端文件或图片后，后端

@RequestMapping(value="changMesg" ,method=RequestMethod.POST) public String changMesg(MultipartFile file, HttpServletRequest request) throws Exception{ if(file!=null){ String originalName =file.getOriginalFilename(); //获取文件.再的位置，好组成新的名称时就直接在末尾添加上格式就行了 int index =originalName.lastIndexOf("."); //组成一个新的图片名称，用uuid这样避免重复 String newFileName=UUID.randomUUID()+originalName.substring(index,originalName.length()); //获取应用所在的服务的文件路径 ServletContext application =session.getServletContext(); String path=application.getRealPath("/"); File imagFile =new File(path+"uploadimage/"+newFileName); //写到指定路径了 file.transferTo(imagFile); //现在图片已经上传到Tomcat的此项目名下的uploadimage文件夹下 }

这时候如果大家刷新项目，项目下的uploadimage下的图片也不会有，但是如果你去Tomcat中查找肯定能找到，因为你上传到了服务器端上，可以参考我的另一篇博客，来修改服务器端(Tomcat)的配置只能在服务器端上查看，不过不要紧，不影响回显我在这犯了一个错误我让它在jsp上的src里面写的是服务端的绝地地址，比如：D:/… 肯定显示不出来，一开始以为是静态资源拦截，我又查看了下，没有最后想起用request.getContextPath()

session.setAttribute("userImage",request.getContextPath()+"/"+imagePath+imageName);

这样前端写的

就能显示图片了

补充在spring boot中上传图片回显问题

除非那种经常不换的图片存在项目下的图片文件夹里，像需要上传的图片一般是不存储在项目里的，会存储图片数据库，或者自己创建的库等等，因为毕设没必要再弄一个图片数据库了，为了方便就直接存储在项目里了，出现了上传成功后不能回显的问题( 上传后可以重新部署，就可以显示，但是不可能每次上传都重新部署吧)：

其他的和上面的一致，就是在webapp下有一个配置类

/** * 静态资源映射 */ @Configuration public class WebMvcConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { //相对路径映射因为不重新部署，这个就会显示404 registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/"); //绝对路径映射，这个不重新部署就可以回显，因为映射你的本地 registry.addResourceHandler("/head_shot/**").addResourceLocations("file:D:\\IDEAworkspace\\hr-ms\\webapp\\src\\main\\resources\\static\\head_shot\\"); } }

【本文地址】

公司简介

联系我们