🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

minio-js

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

minio-js

minioclient

1.0.7
latest
npm
Version published
Weekly downloads
267
59.88%
Maintainers
1
Weekly downloads
 
Created
Source

MinioJS

Minio的官方客户端使用时必须依赖node.js, 无法在vite项目中使用, 此项目把minio的使用打包为纯js,可以在浏览器中直接调用minio的客户端

源码地址

https://gitee.com/zheyiw/minio-js-m

npm包地址

https://www.npmjs.com/package/minio-js

安装

yarn add minio-js

在vue3(vite)中使用

<template>
  <div id="nav">
    <p>vite中import使用miniojs上传文件</p>
    <input ref="input" type="file" @change="handleFiles" />
  </div>
</template>
<script lang="ts">
import { initMinio, putObject } from 'minio-js'

export default {
  methods: {
    handleFiles(event: any) {
      var f = event.target.files[0]
      let reader = new FileReader()
      reader.readAsArrayBuffer(f)
      reader.onload = function (e: any) {
        let res = e.target.result //ArrayBuffer
        //先初始化
        initMinio({
          endPoint: '192.168.2.98',
          port: 9002,
          useSSL: false,
          accessKey: 'admin',
          secretKey: '12345678',
        })
        //再上传
        putObject("act", res, f.name)
        console.log('上传完成')
      }
    },
  },
}
</script>

在html中使用

以js的方法使用, 直接引用MinioJs.js文件(文件很大, 按需引入)

<html>
  <head>
    <title>MinioJs</title>
  </head>
  <body>
    <div id="root">MinioJs</div>
    <script type="text/javascript" src="./MinioJs.js"></script>
    <script
      type="text/javascript"
      src="http://code.jquery.com/jquery-1.10.2.min.js"
    ></script>
    <div id="nav">
      <p>Minio文件上传：</p>
      <form id="form"><input type="file" name="file" id="file" /><br /></form>
    </div>
    <script type="text/javascript">
      $(function () {
        form.reset(); //清除浏览器记录的上次记录
        var file;
        $(form).on("change", "#file", function (e) {
          console.log(this.value); //文件路径
          console.log(this.files[0].name); //文件名

          //把文件以ArrayBuffer的形式读取后给Minio上传
          var f = this.files[0];
          let reader = new FileReader();
          reader.readAsArrayBuffer(f);
          reader.onload = function (e) {
            let res = e.target.result; //ArrayBuffer
            //先初始化
            MinioJs.initMinio({
              endPoint: "192.168.2.98",
              port: 9002,
              useSSL: false,
              accessKey: "admin",
              secretKey: "12345678",
            });
            //再上传
            MinioJs.putObject("bucket1", res, f.name);
            console.log("尝试上传中...");
          };
        });
      });
    </script>
  </body>
</html>

在Vue项目中以直接引入MinioJs.js的方式使用

把MinioJs.js放在public目录下面,在index.html中引入

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite App</title>
  <script type="text/javascript" src="config.js"></script>
  <script type="text/javascript" src="MinioJs.js"></script>
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>

使用

<template>
  <div id="nav">
    <p>MinioJs上传文件：</p>
    <input ref="input" type="file" @change="handleFiles" />
  </div>
</template>
<script lang="ts">
declare const MinioJs: any //定义

export default {
  methods: {
    handleFiles(event: any) {
      var f = event.target.files[0]
      let reader = new FileReader()
      reader.readAsArrayBuffer(f)
      reader.onload = function (e: any) {
        let res = e.target.result //ArrayBuffer
        //先初始化
        MinioJs.initMinio({
          endPoint: '192.168.2.98',
          port: 9002,
          useSSL: false,
          accessKey: 'admin',
          secretKey: '12345678',
        })
        //再上传
        MinioJs.putObject("bucket1", res, f.name)
        console.log('上传中...')
      }
    },
  },
}
</script>

Keywords

minio

FAQs

Package last updated on 30 Dec 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Socket Now Supports pylock.toml Files

Product

Socket Now Supports pylock.toml Files

Socket now supports pylock.toml, enabling secure, reproducible Python builds with advanced scanning and full alignment with PEP 751's new standard.

By Trevor Norris  -  Jun 05, 2025