前端使用minio傳輸文件的代碼及拓展
minio-js可以支持ts。
安裝完可能會(huì)出現(xiàn)
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服務(wù)器ip,不能加http://
port: 9000,
accessKey: 'xxxx', //username
secretKey: 'xxxx', //password
useSSL: false //https訪問(wèn)需要設(shè)置為true
})
上傳文件
const stream = require('stream')
/**
*
* @export 上傳文件(stream流方法)
* @param {*} backetName String 存儲(chǔ)桶名字
* @param {*} fileObj Object 文件對(duì)象
* @param {*} callback function 回調(diào)函數(shù)
*/
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)
// 參數(shù)
const metadata = {
'content-type': mineType,
'content-length': fileSize
}
// 判斷儲(chǔ)存桶是否存在
minioClient.bucketExists(backetName, function (err) {
console.log('判斷儲(chǔ)存桶是否存在')
if (err) {
if (err.code === 'NoSuchBucket') {
return console.log('bucket does not exist.')
}
console.log('1233221')
return console.log(err)
}
// 準(zhǔn)備上傳
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轉(zhuǎn)blob
* @param {*} base64Data Object base64數(shù)據(jù)
* @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])
}
// 獲取文件類(lèi)型
const mimeString = base64Data.split(';')[0].split(':')[1] // mime類(lèi)型
const uintArr = new Uint8Array(byteString.length) // 創(chuàng)建視圖
for (let i = 0; i < byteString.length; i++) {
uintArr[i] = byteString.charCodeAt(i)
}
const blob = new Blob([uintArr], {
type: mimeString
})
return blob
}
// 先判斷桶是否存在,如果可確保捅已經(jīng)存在,則直接調(diào)用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)
})
}
上傳文件簡(jiǎn)單版:
const bucketName = 'picturebook-version'; // 替換為你的存儲(chǔ)桶名稱
const objectName = file.file.name; // 使用文件名作為對(duì)象名稱
//創(chuàng)建 FileReader 對(duì)象
const reader = new FileReader();
// 當(dāng)讀取完成時(shí)觸發(fā)的回調(diào)函數(shù)
reader.onload = (event) => {
// 從事件對(duì)象中獲取文件內(nèi)容
const fileContent = event.target.result;
// 轉(zhuǎn)換 ArrayBuffer 為 Buffer 類(lèi)型數(shù)據(jù)
const buffer = Buffer.from(fileContent);
// 使用 putObject 方法上傳文件內(nèi)容
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);
}
});
};
// 開(kāi)始讀取文件
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,
}
})
}
},
拓展
優(yōu)點(diǎn):
1.直接訪問(wèn)對(duì)象存儲(chǔ):前端直接與 MinIO 通信,而不需要通過(guò)后端服務(wù)器作為中介。這樣可以降低后端服務(wù)器的負(fù)擔(dān),減少網(wǎng)絡(luò)傳輸時(shí)間,提高文件傳輸效率。
2.降低后端開(kāi)發(fā)成本:前端直接使用 MinIO SDK 進(jìn)行文件上傳和下載,減少了與后端開(kāi)發(fā)相關(guān)的工作量。這樣可以加快開(kāi)發(fā)速度,并降低了整體的開(kāi)發(fā)成本。
3.分布式存儲(chǔ)支持:MinIO 支持分布式存儲(chǔ),可以在多個(gè)節(jié)點(diǎn)之間存儲(chǔ)數(shù)據(jù),實(shí)現(xiàn)高可用性和容錯(cuò)性。前端直接與 MinIO 通信,可以利用 MinIO 的分布式特性,將文件分散存儲(chǔ)在不同的節(jié)點(diǎn)上,提高文件的可靠性和可用性。
4.快速上傳和下載:MinIO 針對(duì)文件上傳和下載進(jìn)行了優(yōu)化,提供了快速的傳輸速度和低延遲的訪問(wèn)體驗(yàn)。前端直接與 MinIO 通信,可以獲得更快的上傳和下載速度,提高用戶體驗(yàn)。
5.可控性和安全性:前端直接使用 MinIO SDK 進(jìn)行文件上傳和下載,可以根據(jù)需要設(shè)置訪問(wèn)權(quán)限、加密方式等安全措施,保護(hù)文件的安全性和完整性。同時(shí),前端可以完全掌控文件的訪問(wèn)和管理,保留對(duì)文件的完全控制權(quán)。
6.跨平臺(tái)兼容性:MinIO 提供了豐富的客戶端 SDK,包括 JavaScript SDK,在各種前端平臺(tái)(Web、移動(dòng)端、桌面端)上都可以方便地集成和使用。這樣可以實(shí)現(xiàn)跨平臺(tái)的文件上傳和下載,滿足不同平臺(tái)的需求。
缺點(diǎn):
1.只支持Webpack工程化構(gòu)建的項(xiàng)目,因?yàn)閣ebpack是基于nodeJs的,可以使用require, fs等函數(shù)
2.不支持Vite工程化構(gòu)建形式,Vite是EsModule純?yōu)g覽器模塊的形式,沒(méi)有nodeJs里的函數(shù),只能使用import,但部分第三方庫(kù)并不支持,會(huì)報(bào)奇怪的錯(cuò)誤
3.前端直傳Minio是無(wú)法獲取上傳進(jìn)度的,自然也就無(wú)法顯示進(jìn)度條,從而無(wú)法擁有良好的人機(jī)交互感,并且需要等待Minio反饋后才能判斷是否上傳成功
4.端口,登錄賬號(hào),登錄密碼都寫(xiě)在前端,會(huì)暴露關(guān)鍵信息,易造成不必要的信息泄露,并且不易維護(hù)
5.由前端寫(xiě)Minio接口不利于之后的擴(kuò)展,每開(kāi)一個(gè)項(xiàng)目,都需要copy代碼,無(wú)形中增加了維護(hù)的困難性
總結(jié)
到此這篇關(guān)于前端使用minio傳輸文件的代碼及拓展的文章就介紹到這了,更多相關(guān)前端用minio傳輸文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實(shí)現(xiàn)多態(tài)和繼承的封裝操作示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)多態(tài)和繼承的封裝操作,結(jié)合實(shí)例形式分析了javascript中多態(tài)與繼承的實(shí)現(xiàn)及封裝相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
ES6新數(shù)據(jù)結(jié)構(gòu)Set與WeakSet用法分析
這篇文章主要介紹了ES6新數(shù)據(jù)結(jié)構(gòu)Set與WeakSet用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了Set與WeakSet的功能、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-03-03
利用JS實(shí)現(xiàn)機(jī)器人總動(dòng)員小游戲
這篇文章主要介紹了如何利用HTML+CSS+JS編寫(xiě)一個(gè)機(jī)器人總動(dòng)員小游戲,代碼簡(jiǎn)單易懂對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11
JS實(shí)現(xiàn)提示框跟隨鼠標(biāo)移動(dòng)
在本篇內(nèi)容里小編給各位整理了一篇關(guān)于JS實(shí)現(xiàn)提示框跟隨鼠標(biāo)移動(dòng)的相關(guān)實(shí)例代碼,需要的朋友們學(xué)習(xí)下。2019-08-08
讓IDE識(shí)別webpack的別名alias的實(shí)現(xiàn)方法
這篇文章主要介紹了讓IDE識(shí)別webpack的別名alias的實(shí)現(xiàn)方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
JavaScript中防抖和節(jié)流的原理和區(qū)別詳解
JavaScript 中,防抖和節(jié)流是一種用于優(yōu)化事件處理函數(shù)調(diào)用頻率的技術(shù),防抖和節(jié)流的目的都是為了避免頻繁地觸發(fā)事件處理函數(shù),從而減少瀏覽器和服務(wù)器的負(fù)擔(dān),本文將給大家介紹一下JavaScript中防抖和節(jié)流的原理和區(qū)別,需要的朋友可以參考下2023-09-09
JavaScript學(xué)習(xí)筆記之取數(shù)組中最大值和最小值
在實(shí)際業(yè)務(wù)中有的時(shí)候要取出數(shù)組中的最大值或最小值。但在數(shù)組中并沒(méi)有提供arr.max()和arr.min()這樣的方法。那么是不是可以通過(guò)別的方式實(shí)現(xiàn)類(lèi)似這樣的方法呢?那么今天我們就來(lái)整理取出數(shù)組中最大值和最小值的一些方法,需要的朋友一起學(xué)習(xí)吧2016-03-03

