java Spring Boot2.7写一个接口 提供图片预览 前端可以直接用接口地址当src为图片地址使用

我们特别是在做小程序开发时 很多图片会比较大 而小程序本身就对自身大小要求非常高
所以 图片放在服务器上提供访问链接是一种非常好的选择

我想很多前端会误认为 直接将图片放在服务器上就可以了
但其实没那么简单 因为服务器其实也可以理解为一个电脑 你就想 你自己本地都不能直接链接访问 放到服务器怎么可能就有这好事了呢?

但我们可以通过写一个接口来完成
这个功能不需要注入任何依赖

就比如 我要将 D:/图片管理/奇迹商人.jpg 文件保留出来 提供给大家预览
我就可以这样写

@GetMapping("/image")
public ResponseEntity<ByteArrayResource> getImage() throws IOException {
    // 指定图片文件路径
    String imagePath = "D:/图片管理/奇迹商人.jpg";

    // 读取图片文件为字节数组
    Path path = Paths.get(imagePath);
    byte[] imageBytes = Files.readAllBytes(path);

    // 创建字节数组资源
    ByteArrayResource resource = new ByteArrayResource(imageBytes);

    // 设置响应头
    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(MediaType.IMAGE_JPEG);

    // 返回字节数组资源作为响应
    return ResponseEntity.ok()
            .headers(headers)
            .contentLength(imageBytes.length)
            .body(resource);
}

在这里插入图片描述
然后 我们启动项目
在浏览器上输入接口地址 即可实现这个图片的预览了
在这里插入图片描述
前端也可以直接将这个接口的地址 当做图片地址 放在src中

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的使用 Java文件下载接口的示例代码。 假设你的文件下载接口是 `/download`,接收一个参数 `file` 表示文件名,那么可以使用 Spring Boot 框架来编接口。 首先,需要在 Spring Boot 的配置文件中设置文件上传和下载的临时目录: ``` spring.servlet.multipart.enabled=true spring.servlet.multipart.file-size-threshold=2MB spring.servlet.multipart.max-file-size=20MB spring.servlet.multipart.max-request-size=50MB spring.servlet.multipart.location=/tmp ``` 然后,在控制器中定义文件下载接口: ```java import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.http.MediaType; import org.springframework.core.io.Resource; import org.springframework.core.io.UrlResource; import org.springframework.web.servlet.mvc.method.annotation.MvcUriComponentsBuilder; import org.springframework.web.servlet.mvc.support.RedirectAttributes; import java.nio.file.Path; import java.nio.file.Paths; @Controller public class DownloadController { @GetMapping("/download") @ResponseBody public ResponseEntity<Resource> downloadFile(@RequestParam("file") String fileName) { try { // 获取文件路径 Path path = Paths.get("/tmp/" + fileName); Resource resource = new UrlResource(path.toUri()); // 构造响应头 HttpHeaders headers = new HttpHeaders(); headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + resource.getFilename() + "\""); headers.add(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_OCTET_STREAM_VALUE); return ResponseEntity.ok() .headers(headers) .body(resource); } catch (Exception e) { e.printStackTrace(); return ResponseEntity.notFound().build(); } } } ``` 上面的代码中,`downloadFile` 方法接收一个文件名 `fileName`,然后通过 `Paths.get` 方法获取文件路径,使用 `UrlResource` 对象将文件封装为 `Resource` 对象,最后构造响应头并返回文件内容。 在前端中,可以通过 axios 库来调用文件下载接口: ```javascript axios({ url: '/download', method: 'GET', responseType: 'blob', params: { file: 'your-file-name' } }).then(response => { const url = window.URL.createObjectURL(new Blob([response.data])) const link = document.createElement('a') link.href = url link.setAttribute('download', 'your-file-name') document.body.appendChild(link) link.click() }) ``` 上面的代码中,`axios` 方法中的 `responseType` 参数设置为 `blob`,表示返回的数据是二进制数据,然后通过 `Blob` 对象将数据转换为文件,最后使用 a 标签模拟点击下载。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值