前端使用minio传输文件的代码及拓展
作者：Frilled Lizard
MinIO是一款基于Go语言的高性能对象存储服务,非常适合于存储大容量非结构化的数据,例如图片、视频、日志文件、备份数据和容器/虚拟机镜像等,这篇文章主要给大家介绍了关于前端使用minio传输文件的相关资料,需要的朋友可以参考下
minio-js可以支持ts。
安装完可能会出现
Can‘t import the named export ‘xxx‘ from non EcmaScript module (only default export is available)
可以尝试降低minio的版本
npm install minio@7.0.18 --save
代码：
初始化
const Minio = require('minio')
const minioClient = new Minio.Client({
endPoint: '192.l68.0.1', //minio服务器ip，不能加http://
port: 9000,
accessKey: 'xxxx', //username
secretKey: 'xxxx', //password
useSSL: false //https访问需要设置为true
})
上传文件
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)
})
}
上传文件简单版：
const bucketName = 'picturebook-version'; // 替换为你的存储桶名称
const objectName = file.file.name; // 使用文件名作为对象名称
//创建 FileReader 对象
const reader = new FileReader();
// 当读取完成时触发的回调函数
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);
下载文件
export function downloadFile (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> <input type="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代码,无形中增加了维护的困难性
总结
到此这篇关于前端使用minio传输文件的代码及拓展的文章就介绍到这了,更多相关前端用minio传输文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！