上传图片接口 Java_java + minio实现image图片上传下载接口的deme

项目deme地址:https://gitee.com/itliulei/springboot-minio-demo.git

idea spring+maven+mybatis jdk:1.8

最近做了一个项目,使用了一个Minio(对象存储服务器)作为图片的存放,实际他的功能还很强大

简介:

Minio是Apache License v2.0下发布的对象存储服务器。它与Amazon S3云存储服务兼容。它最适合存储非结构化数据,如照片,视频,日志文件,备份和容器/ VM映像。对象的大小可以从几KB到最大5TB

Minio服务器足够轻,可以与应用程序堆栈捆绑在一起,类似于NodeJS,Redis和MySQL。

温馨提示:项目的配置地址什么的我就不改了,我的服务器也是玩的,如果我没有研究其他的项目配置的minio地址直接就可以用,如果不可以用,你就自己重新搭一个吧~~

按照执行循序贴代码:

1:MinioController

public class MinioController {

@Autowired

MinIOUtils minIOUtils;

/**

* 上传图片

* @param file

* @return

*/

@PostMapping("/uploadImage")

public Result> uploadImage(@RequestParam("file") MultipartFile file){

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现Spring Boot与Vue.js集成,并使用MinIO存储和读取图片或视频,可以按照以下步骤操作: 1. 后端实现 首先,你需要在Spring Boot中集成MinIO客户端,以便从MinIO读取文件。你可以使用MinIO Java SDK来实现这一点。然后,你需要在Spring Boot中实现一个REST API,该API可以接收前端发送的请求,并从MinIO读取文件,然后将文件返回给前端。 例如,你可以实现一个REST API,其URL为`/api/file/{filename}`,其中`{filename}`是要从MinIO读取的文件名。在该API中,你可以使用MinIO Java SDK从MinIO读取文件,然后将文件内容返回给前端。以下是一个可能的实现: ```java @RestController @RequestMapping("/api") public class FileController { private final MinioClient minioClient; public FileController(MinioClient minioClient) { this.minioClient = minioClient; } @GetMapping("/file/{filename}") public ResponseEntity<byte[]> getFile(@PathVariable String filename) throws Exception { InputStream inputStream = minioClient.getObject("bucket-name", filename); byte[] bytes = IOUtils.toByteArray(inputStream); HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.IMAGE_JPEG); // 设置Content-Type为图片类型 return new ResponseEntity<>(bytes, headers, HttpStatus.OK); } } ``` 2. 前端实现 在Vue.js中,你可以使用`axios`库来发送请求获取后端API返回的文件内容,并将其显示在页面上。以下是一个可能的实现: ```vue <template> <div> <img :src="imageSrc" /> <video :src="videoSrc" controls></video> </div> </template> <script> import axios from 'axios'; export default { data() { return { imageSrc: '', videoSrc: '', }; }, mounted() { axios.get('/api/file/image.jpg', { responseType: 'blob' }).then((response) => { const reader = new FileReader(); reader.readAsDataURL(response.data); reader.onload = () => { this.imageSrc = reader.result; }; }); axios.get('/api/file/video.mp4', { responseType: 'blob' }).then((response) => { const reader = new FileReader(); reader.readAsDataURL(response.data); reader.onload = () => { this.videoSrc = reader.result; }; }); }, }; </script> ``` 在上面的代码中,我们使用`axios`库发送GET请求获取图片和视频文件的内容,并将其转换为Base64编码的字符串,然后将其分别赋值给`imageSrc`和`videoSrc`变量,从而在页面上显示图片和视频。注意,我们需要将`responseType`设置为`blob`,以便获取文件的原始二进制数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值