### 配置
Vue 项目以预览 MinIO 存储的图片
为了使
Vue 应用能够访问并显示存储于 MinIO 的图像资源，需完成前端与后端两部分设置。
#### 后端配置
(Spring Boot
)
创建用于处理文件上
传和下载请求的服务接口。通过定义 `fileUpload` 接口实现文件向 MinIO 的上
传操作；而 `minioView` 则负责接收客户端发出的对象名称参数，并据此从 MinIO 获取对应的二进制数据流作为响应返回给调用者[^2]。
```java
@RestController
@RequestMapping
("/api/files"
)
public class FileController {
@Autowired
private MinioClient minioClient;
@PostMapping
("/upload"
) // fileUpload endpoint
public ResponseEntity<String> uploadFile
(@RequestParam
("file"
) MultipartFile file
) {
try {
InputStream inputStream = new ByteArrayInputStream
(file.
getBytes
());
Put
ObjectArgs
objectArgs = Put
ObjectArgs.builder
()
.bucket
("your-bucket-name"
)
.
object(file.
getOriginalFilename
())
.stream
(inputStream, file.
getSize
(), -
1)
.contentType
(file.
getContentType
())
.build
();
minioClient.put
Object(objectArgs
);
return ResponseEntity.ok
("File uploaded successfully"
);
} catch
(Exception e
) {
return ResponseEntity.status
(HttpStatus.INTERNAL_SERVER_ERROR
).body
(e.
getMessage
());
}
}
@
GetMapping
("/{filename}"
) // minioView endpoint
public void viewImage
(HttpServ
letResponse response, @PathVariable String filename
) throws Exception {
GetObjectResponse
getObjectResponse = minioClient.
getObject(
GetObjectArgs.builder
().bucket
("your-bucket-name"
).
object(filename
).build
());
IOUtils.copy
(getObjectResponse, response.
getOutputStream
());
response.setContentType
(MediaType.IMAGE_JPEG_VALUE
);
// Adjust based on image type
}
}
```
#### 前端集成
(Vue.js
)
在
Vue 组件内部利用 Axios 发起
HTTP 请求至上述 RESTful API 来加载指定路径下的静态资源。对于图片展示而言，可以直接将服务器提供的 URL 设置为 `<
img>` 标签中的 src 属性值即可[^4]。
```html
<template>
<div id="app">
<h
1>MinIO 图片浏览</h
1>
<!-- 使用
img 标记绑定动态 url -->
<div v-for="
(item,index
) in imagesList"
:key="index">
<p>{{ item.name }}</p>
<
img :src="'
http://localhost:8080/api/files/' + item.name"/>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name
: "App",
data
() {
return {
imagesList
: []
};
},
mounted
(){
this.fetchImages
();
},
methods
:{
async fetchImages
(){
const res=await axios.
get('
http://localhost:8080/api/files/list'
);
console.log
(res.data
);
this.imagesList=res.data;
}
}
};
</script>
```
此代码片段展示了如何构建一个简单的
Vue 页面来呈现由 Spring Boot 提供服务地址所指向的一系列图片列表。请注意调整实际部署环境下的主机名及端口号匹配情况。
扫一扫
7870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
