MinIo纯前端使用文件上传预览
MinIo使用问题记录
- 一、前端直接调用minio上传预览
- 1. 直接安装依赖
- 2. 使用完整代码
- 二、关于上传图片后不能预览
- 安装依赖和启动问题（如下上传成功之后返回的地址预览失败）
- 解决方法：
- 1. 线确认已经有预览权限
- 2. 点击一个图片查看图片格式
- 3. 查看返回地址
一、前端直接调用minio上传预览
1. 直接安装依赖
npm install minio
npm install --save mockjs
2. 使用完整代码
import { Minio } from "minio-js";
export function client() {const client = new Minio.Client({endPoint: '', // 例如: 'localhost' 或 'minio.yourdomain.com'port: 9000, // MinIO 默认端口useSSL: false, // 如果是 https 则设为 trueaccessKey: '', // 相当于 accessKeyIdsecretKey: '', // 相当于 accessKeySecret})console.log('测试',client)// 返回兼容 OSS API 的包装对象return client
}
//这里是引入了上边那个js文件后的使用逻辑client().presignedPutObject("",//桶名称fileName,//文件名称，这里可以直接用element文件上传组件获取1000 * 60 * 5,//URL有效期function (err, presignedUrl) {//错误的回调方法if (err) return console.log(err);console.log('获取地址',file.file)fetch(presignedUrl, {mode: "cors", // 解决跨域headers: {'Content-Type': 'image/jpeg' // 明确设置 MIME 类型},method: "PUT",body: file.file,//data就是文件对象这里可以直接用element文件上传组件获取}).then((response) => {if (response.ok) {// 处理成功的情况console.log('上传成功',response)let value = "http://192.168.2.139:9000/pujiang/"+fileName;//这个是预览地址 直接返回的应该是下载地址console.log(value, 'value',fileName)} else {// 处理失败的情况}});})二、关于上传图片后不能预览
安装依赖和启动问题（如下上传成功之后返回的地址预览失败）
解决方法：
1. 线确认已经有预览权限
2. 点击一个图片查看图片格式
如果不是image/jpeg格式看下上传时候请求头设置
3. 查看返回地址
一般直接返回的地址是：
http://域名:9000/pujiang/image/banner1761553934000.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JLvsvtCqfWn9DikgOtDG%2F20251027%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251027T083214Z&X-Amz-Expires=300000&X-Amz-SignedHeaders=host&X-Amz-Signature=fba208e626b3d0bf86a572d124561aa3c31a438cbe4d63d01014355425229bf4
重新拼接成预览地址
http://域名:9000/pujiang/image"+'banner1761553934000.jpg'