图片上传和图片回显(返回图片url)

后端需要配置静态文件路径:

有两种方式:

第一种在 application.yml中添加代码如下:

web:
  upload-path: E:\image
#spring配置
spring:
  mvc:
    static-path-pattern: /**
  resources:
    static-locations: classpath:/META-INF/resources/,classpath:/resources/,\classpath:/static/,classpath:/public/,file:${web.upload-path}

第二种在 application.properities中添加代码如下:

#允许本地静态文件
spring.mvc.static-path-pattern=/**
spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,\
  classpath:/static/,classpath:/public/,file:${upload-file-path}
application.properities文件中的 file:${upload-file-path}可以在                application-prod.properties   或 application-dev.properties 中设置
#上传文件的文件夹(需要手动创建)
upload-file-path=E://image/

1、

这时候前段想访问E:\image文件夹下的图片,后端需要返回给前段的图片访问路径是:http:ip:端口/图片名字      ip为服务器ip,  本地可以用127.0.0.1  也可以用本机电脑的局域网ip如: 192.168.1.2   端口为项目启动时占用的端口

比如  : http:127.0.0.1:9080/123.png    http:192.168.1.2:9080/123.png 

由于设置了上传路径upload-path: E:\image  或upload-file-path=E://image/  所以系统默认直接读取

E:\image文件夹下的内容,所以 E:\image作为根路径,在返回给前段的url中不用写/image

2、

如果在E:\image文件夹下再新建一个叫 content的文件夹,将文件上传到content文件夹下,这时候前段想查看content文件夹下的图片,

我们就需要返回给前段这样的url  :  http:ip:端口/content/图片名字

比如  : http:127.0.0.1:9080/content/123.png 

3、

如果  static-path-pattern: /static/**  在访问图片的时候就需要在url中加   "static"

比如:  http:127.0.0.1:9080/static/123.png

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Spring MVC 提供了文件上传的支持,可以使用 MultipartFile 类型来接收上传的文件。以下是图片上传回显的步骤: 1. 在前端页面中添加一个表单,其中包含一个文件选择器用于选择要上传的图片文件,并设置表单的 enctype 为 "multipart/form-data"。 2. 在后端的控制器中定义一个处理文件上传的方法,并使用 @RequestParam 注解来接收上传的图片文件。例如: ``` @RequestMapping("/upload") public String upload(@RequestParam("file") MultipartFile file) { // 处理上传的文件 return "redirect:/image"; // 重定向到显示图片的方法 } ``` 3. 在处理上传的方法中可以进行文件的存储操作,例如将文件保存到本地的文件系统或将文件存储到数据库。 4. 在显示图片的方法中,可以通过文件的路径或存储的唯一标识来获取图片,并将图片返回给前端页面。例如: ``` @RequestMapping("/image") public void showImage(HttpServletResponse response) throws IOException { // 从存储位置获取图片,如从文件系统获取或从数据库获取 File imageFile = new File("path/to/image.jpg"); // 设置响应的 Content-Type 为 image/jpeg response.setContentType(MediaType.IMAGE_JPEG_VALUE); // 将图片写入响应的输出流中 FileInputStream fileInputStream = new FileInputStream(imageFile); IOUtils.copy(fileInputStream, response.getOutputStream()); fileInputStream.close(); response.getOutputStream().close(); } ``` 5. 在前端页面中,可以使用 img 标签来显示图片,设置其 src 属性为显示图片的方法的 URL。例如: ``` <img src="/image" alt="Image"> ``` 通过以上步骤,我们可以实现图片上传回显的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值