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

6 篇文章 0 订阅

从头开始

前端

<script type="text/javascript">
	
			// 选择图片显示
			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属性值
			};

	
	</script>
//因为牵扯到上传图片,form表单一定要有 enctype="multipart/form-data",因为上传立马显示
//还不经过后端,所以accept="image/*"
<form action="url"  method="post" enctype="multipart/form-data">
				<img  id="imghead" src="${sessionScope.userImage}"  width="150px" height="150px" />
   					<input type="file"name="file"id="file" accept="image/*" onchange="imgChange(this);"/> 
</form>

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

@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);

这样前端写的

<img src ="${sessionScope.userImage}"/>

就能显示图片了

补充 在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\\");
    }
 
}
  • 10
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
首先,需要在前端创建一个表单,用于上传图片。 ```html <form method="POST" enctype="multipart/form-data"> {% csrf_token %} <input type="file" name="image"> <button type="submit">上传图片</button> </form> ``` 然后,在后端的视图函数中,可以通过 `request.FILES` 获取上传的文件对象,并使用 `FileSystemStorage` 存储到指定的文件夹中。 ```python from django.shortcuts import render from django.core.files.storage import FileSystemStorage def upload(request): if request.method == 'POST': uploaded_file = request.FILES['image'] fs = FileSystemStorage() filename = fs.save(uploaded_file.name, uploaded_file) return render(request, 'upload.html', {'filename': filename}) return render(request, 'upload.html') ``` 在上面的代码中,`request.FILES` 是一个 `django.core.files.uploadedfile.InMemoryUploadedFile` 或 `django.core.files.uploadedfile.TemporaryUploadedFile` 对象的字典,可以通过 `name` 属性获取上传的文件名,通过 `read()` 方法读取文件内容。 `FileSystemStorage` 是 Django 提供的一个文件系统存储类,可以将文件存储到本地文件系统中。在默认情况下,存储位置是 `MEDIA_ROOT` 设置的文件夹,可以在 `settings.py` 中进行配置。例如: ```python MEDIA_ROOT = os.path.join(BASE_DIR, 'media') MEDIA_URL = '/media/' ``` 最后,需要在模板中显示上传的图片,可以使用 `MEDIA_URL` 和 `filename` 拼接出图片URL,然后在 `<img>` 标签中展示。 ```html {% if filename %} <img src="{{ MEDIA_URL }}{{ filename }}" alt="上传的图片"> {% endif %} ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值