前端使用minio传输文件

minio官方文档
minio-js可以支持ts。

安装完可能会出现

Can‘t import the named export ‘xxx‘ from non EcmaScript module(only defaultexport is available)

可以尝试降低minio的版本

npm install [email protected]

代码：

初始化

const Minio =require('minio')const minioClient =newMinio.Client({endPoint:'192.l68.0.1',//minio服务器ip，不能加http://port:9000,accessKey:'xxxx',//usernamesecretKey:'xxxx',//passworduseSSL:false//https访问需要设置为true})

上传文件

const stream =require('stream')/**
 *
 * @export 上传文件（stream流方法）
 * @param {*} backetName String 存储桶名字
 * @param {*} fileObj Object 文件对象
 * @param {*} callback function 回调函数
 */exportfunctionuploadFile(backetName, fileObj, callback){
  console.log(backetName, fileObj)if(fileObj){const file = fileObj
    if(file ===undefined){// 未选择}else{const date =newDate()const year =newDate().getFullYear()const month =
        date.getMonth()+1<10?'0'+(date.getMonth()+1): date.getMonth()+1const day = date.getDate()>9? date.getDate():'0'+ date.getDate()const fileName = date.getTime()+ file.name
      const fileDate =''+ year + month + day
      const mineType = file.type
      const fileSize = file.size
      console.log('fileName', fileName)// 参数const metadata ={'content-type': mineType,'content-length': fileSize
      }// 判断储存桶是否存在
      minioClient.bucketExists(backetName,function(err){
        console.log('判断储存桶是否存在')if(err){if(err.code ==='NoSuchBucket'){return console.log('bucket does not exist.')}
          console.log('1233221')return console.log(err)}// 准备上传const reader =newFileReader()
        reader.readAsDataURL(file)
        reader.onloadend=function(e){const dataurl = e.target.result
          const blob =toBlob(dataurl)const reader2 =newFileReader()
          reader2.readAsArrayBuffer(blob)
          reader2.onload=function(ex){const bufferStream =newstream.PassThrough()
            bufferStream.end(Buffer.from(ex.target.result))
            minioClient.putObject(
              backetName,`${fileDate}/${fileName}`,
              bufferStream,
              fileSize,
              metadata,(err)=>{if(err ==null){
                  minioClient.presignedPutObject(
                    backetName,`${fileDate}/${fileName}`,24*60*60,function(err1, presignedUrl){
                      console.log(err1)if(err1)returnif(presignedUrl){const arr = presignedUrl.split('?')if(arr.length ===2){callback(arr[0])}}})}})}}})}}}/**
 *
 * @export base64转blob
 * @param {*} base64Data Object base64数据
 * @return {*} blob
 */exportfunctiontoBlob(base64Data){let byteString = base64Data
  if(base64Data.split(',')[0].indexOf('base64')>=0){
    byteString = window.atob(base64Data.split(',')[1])// base64 解码}else{
    byteString =unescape(base64Data.split(',')[1])}// 获取文件类型const mimeString = base64Data.split(';')[0].split(':')[1]// mime类型const uintArr =newUint8Array(byteString.length)// 创建视图for(let i =0; i < byteString.length; i++){
    uintArr[i]= byteString.charCodeAt(i)}const blob =newBlob([uintArr],{type: mimeString
  })return blob
}// 先判断桶是否存在，如果可确保捅已经存在，则直接调用uploadFile方法exportfunctioncheckedAndUpload(bucketName, info, callback){
  minioClient.bucketExists(bucketName,err=>{if(err){
      minioClient.makeBucket(bucketName,'us-east-1',err1=>{if(err1){
          console.error(`${info.file.name}文件上传失败`)return}uploadFile(bucketName, info, callback)})}else{uploadFile(bucketName, info, callback)}})}// 先判断桶是否存在exportfunctionconnectionStatus(bucketName, callback){
  minioClient.bucketExists(bucketName,err=>{
    console.Log(err)callback(err)})}

上传文件简单版：

const bucketName ='picturebook-version';// 替换为你的存储桶名称const objectName = file.file.name;// 使用文件名作为对象名称//创建 FileReader 对象const reader =newFileReader();// 当读取完成时触发的回调函数
reader.onload=(event)=>{// 从事件对象中获取文件内容const fileContent = event.target.result;// 转换 ArrayBuffer 为 Buffer 类型数据const buffer = Buffer.from(fileContent);// 使用 putObject 方法上传文件内容this.minioClient.putObject(bucketName, objectName, buffer, buffer.length,(err, etag)=>{if(err){
            console.error('上传文件失败:', err);}else{this.fileList.push(this.newFile);this.fileName = objectName;
             console.log('文件上传成功，ETag:', etag);}});};// 开始读取文件
reader.readAsArrayBuffer(file.file);

下载文件

exportfunctiondownloadFile(bucketName, fileName, callback){
  minioClient.getObject(bucketName, fileName,(err, dataStream)=>{callback(err, dataStream)})}

使用

<div@click="selectFile"style="cursor: pointer;width: 80px;text-align: right"class="ant-upload-text"> 上传 </div><inputtype="file id="uploadInput"ref="uploadInput"v-show="false"@change="changeInput()"/>

import{ uploadFile }from'@/utils/minio'selectFile(){const inputDOM =this.$refs.uploadInput
  inputDOM.click()},changeInput(){const file =this.$refs.uploadInput.files
  if(file.length){this.sourceFile ={name: file[0].name,size: file[0].size,type: file[0].type,}uploadFile('carbon', file[0],(e)=>{this.$refs.uploadInput.value =''this.sourceFile ={...this.sourceFile,url: e,}})}},

拓展

优点：

1.直接访问对象存储：前端直接与 MinIO 通信，而不需要通过后端服务器作为中介。这样可以降低后端服务器的负担，减少网络传输时间，提高文件传输效率。

2.降低后端开发成本：前端直接使用 MinIO SDK 进行文件上传和下载，减少了与后端开发相关的工作量。这样可以加快开发速度，并降低了整体的开发成本。

3.分布式存储支持：MinIO 支持分布式存储，可以在多个节点之间存储数据，实现高可用性和容错性。前端直接与 MinIO 通信，可以利用 MinIO 的分布式特性，将文件分散存储在不同的节点上，提高文件的可靠性和可用性。

4.快速上传和下载：MinIO 针对文件上传和下载进行了优化，提供了快速的传输速度和低延迟的访问体验。前端直接与 MinIO 通信，可以获得更快的上传和下载速度，提高用户体验。

5.可控性和安全性：前端直接使用 MinIO SDK 进行文件上传和下载，可以根据需要设置访问权限、加密方式等安全措施，保护文件的安全性和完整性。同时，前端可以完全掌控文件的访问和管理，保留对文件的完全控制权。

6.跨平台兼容性：MinIO 提供了丰富的客户端 SDK，包括 JavaScript SDK，在各种前端平台（Web、移动端、桌面端）上都可以方便地集成和使用。这样可以实现跨平台的文件上传和下载，满足不同平台的需求。

缺点：

1.只支持Webpack工程化构建的项目,因为webpack是基于nodeJs的,可以使用require, fs等函数
2.不支持Vite工程化构建形式,Vite是EsModule纯浏览器模块的形式,没有nodeJs里的函数,只能使用import,但部分第三方库并不支持,会报奇怪的错误
3.前端直传Minio是无法获取上传进度的,自然也就无法显示进度条,从而无法拥有良好的人机交互感,并且需要等待Minio反馈后才能判断是否上传成功
4.端口,登录账号,登录密码都写在前端,会暴露关键信息,易造成不必要的信息泄露,并且不易维护
5.由前端写Minio接口不利于之后的扩展,每开一个项目,都需要copy代码,无形中增加了维护的困难性