MinIo纯前端使用文件上传预览

原创已于 2025-10-31 15:01:28 修改 · 584 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-10-27 17:06:37 首次发布

MinIo使用问题记录

一、前端直接调用minio上传预览
- - - 1. 直接安装依赖
    - 2. 使用完整代码
二、关于上传图片后不能预览
- 安装依赖和启动问题（如下上传成功之后返回的地址预览失败）
- - 解决方法：

一、前端直接调用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 则设为 true
    accessKey: '', // 相当于 accessKeyId
    secretKey: '', // 相当于 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://xxxx/桶名/"+fileName;//这个是预览地址 直接返回的应该是下载地址
            console.log(value, 'value',fileName)
          } else {
            // 处理失败的情况
           
          }
        });

      })

二、关于上传图片后不能预览

安装依赖和启动问题（如下上传成功之后返回的地址预览失败）

在这里插入图片描述

解决方法：

1. 线确认已经有预览权限

在这里插入图片描述

2. 点击一个图片查看图片格式

在这里插入图片描述
如果不是image/jpeg格式看下上传时候请求头设置

3. 查看返回地址

一般直接返回的地址是：

http://域名:9000/桶名/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/桶名/image"+'banner1761553934000.jpg'