前端使用minio实现上传文件

  1. 创建连接
// 安装minio
npm install --save minio
// 创建连接
 
const Minio = require('minio')
 
const minioClient = new Minio.Client({
  endPoint: '192.l68.0.1', //minio服务器ip
  port: 9000,
  accessKey: 'xxxx', //username
  secretKey: 'xxxx', //password
  useSSL: false  //https访问需要设置为true
})
  1. 上传文件
 
const stream = require('stream')
 
/**
 *
 * @export 上传文件(stream流方法)
 * @param {*} backetName String 存储桶名字
 * @param {*} fileObj Object 文件对象
 * @param {*} callback function 回调函数
 */
export function uploadFile (backetName, fileObj, callback) {
  console.log(backetName, fileObj)
  if (fileObj) {
    const file = fileObj
    if (file === undefined) {
      // 未选择
    } else {
      const date = new Date()
      const year = new Date().getFullYear()
      const month =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1
      const 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 = new FileReader()
        reader.readAsDataURL(file)
        reader.onloadend = function (e) {
          const dataurl = e.target.result
          const blob = toBlob(dataurl)
          const reader2 = new FileReader()
          reader2.readAsArrayBuffer(blob)
          reader2.onload = function (ex) {
            const bufferStream = new stream.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) return
                      if (presignedUrl) {
                        const arr = presignedUrl.split('?')
                        if (arr.length === 2) {
                          callback(arr[0])
                        }
                      }
                    }
                  )
                }
              }
            )
          }
        }
      })
    }
  }
}
 
/**
 *
 * @export base64转blob
 * @param {*} base64Data Object base64数据
 * @return {*} blob
 */
export function toBlob (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 = new Uint8Array(byteString.length) // 创建视图
 
  for (let i = 0; i < byteString.length; i++) {
    uintArr[i] = byteString.charCodeAt(i)
  }
  const blob = new Blob([uintArr], {
    type: mimeString
  })
  return blob
}
 
// 先判断桶是否存在,若捅存在,则直接调用uploadFile方法
export function checkedAndUpload (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)
    }
  })
}
 
// 先判断桶是否存在
export function connectionStatus (bucketName, callback) {
  minioClient.bucketExists(bucketName, err => {
    console.Log(err)
    callback(err)
  })
}
  1. 下载文件
 
export function downloadFile (bucketName, fileName, callback) {
  minioClient.getObject(bucketName, fileName, (err, dataStream) => {
    callback(err, dataStream)
  })
}
  1. 调用
<div @click="selectFile"> 上传 </div>
<input type="file id="uploadInput" ref="uploadInput" v-show="false" @change="changeInput()"
      />
  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现前端传过来的图片上传MinIO,可以使用Python的Flask框架。具体步骤如下: 1. 安装MinIO的Python客户端库 可以使用以下命令进行安装: ``` pip install minio ``` 2. 编写Flask应用程序 在Flask应用程序中,需要提供一个路由,用于接收前端传过来的图片,并将其上传MinIO。可以使用以下代码实现: ```python from flask import Flask, request from minio import Minio from minio.error import ResponseError app = Flask(__name__) # 连接到MinIO服务端 client = Minio('minio.example.com', access_key='ACCESS_KEY', secret_key='SECRET_KEY', secure=False) @app.route('/upload', methods=['POST']) def upload(): # 获取上传的文件 file = request.files['file'] try: # 上传文件 client.put_object('bucket-name', file.filename, file.stream, length=file.content_length, content_type=file.content_type) except ResponseError as err: return str(err), 500 return 'Upload successfully' if __name__ == '__main__': app.run() ``` 其中,`/upload`路由用于接收前端发送的POST请求,该请求中包含了上传的文件。在`upload`函数中,首先从请求中获取上传的文件,然后使用MinIO客户端库将文件上传到指定的存储桶中。 3. 编写前端页面 可以使用HTML和JavaScript编写一个简单的前端页面,用于上传图片。可以使用以下代码实现: ```html <!DOCTYPE html> <html> <body> <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="file"> <input type="submit" value="Upload"> </form> </body> </html> ``` 在表单中,使用`enctype="multipart/form-data"`指定表单数据以二进制形式进行传输,在`<input>`标签中使用`type="file"`指定上传的文件类型。 4. 运行Flask应用程序 保存以上代码为`app.py`文件,并使用以下命令运行Flask应用程序: ``` python app.py ``` Flask应用程序将会运行在默认端口5000上。在浏览器中输入`http://localhost:5000`,可以打开前端页面,上传图片并将其存储到MinIO中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值