前端使用minio傳輸文件的代碼及拓展
minio-js可以支持ts。
安裝完可能會出現(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服務器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 回調(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 } // 判斷儲存桶是否存在 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轉(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]) } // 獲取文件類型 const mimeString = base64Data.split(';')[0].split(':')[1] // mime類型 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) }) }
上傳文件簡單版:
const bucketName = 'picturebook-version'; // 替換為你的存儲桶名稱 const objectName = file.file.name; // 使用文件名作為對象名稱 //創(chuàng)建 FileReader 對象 const reader = new FileReader(); // 當讀取完成時觸發(fā)的回調(diào)函數(shù) reader.onload = (event) => { // 從事件對象中獲取文件內(nèi)容 const fileContent = event.target.result; // 轉(zhuǎn)換 ArrayBuffer 為 Buffer 類型數(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); } }); }; // 開始讀取文件 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)點:
1.直接訪問對象存儲:前端直接與 MinIO 通信,而不需要通過后端服務器作為中介。這樣可以降低后端服務器的負擔,減少網(wǎng)絡傳輸時間,提高文件傳輸效率。
2.降低后端開發(fā)成本:前端直接使用 MinIO SDK 進行文件上傳和下載,減少了與后端開發(fā)相關的工作量。這樣可以加快開發(fā)速度,并降低了整體的開發(fā)成本。
3.分布式存儲支持:MinIO 支持分布式存儲,可以在多個節(jié)點之間存儲數(shù)據(jù),實現(xiàn)高可用性和容錯性。前端直接與 MinIO 通信,可以利用 MinIO 的分布式特性,將文件分散存儲在不同的節(jié)點上,提高文件的可靠性和可用性。
4.快速上傳和下載:MinIO 針對文件上傳和下載進行了優(yōu)化,提供了快速的傳輸速度和低延遲的訪問體驗。前端直接與 MinIO 通信,可以獲得更快的上傳和下載速度,提高用戶體驗。
5.可控性和安全性:前端直接使用 MinIO SDK 進行文件上傳和下載,可以根據(jù)需要設置訪問權限、加密方式等安全措施,保護文件的安全性和完整性。同時,前端可以完全掌控文件的訪問和管理,保留對文件的完全控制權。
6.跨平臺兼容性:MinIO 提供了豐富的客戶端 SDK,包括 JavaScript SDK,在各種前端平臺(Web、移動端、桌面端)上都可以方便地集成和使用。這樣可以實現(xiàn)跨平臺的文件上傳和下載,滿足不同平臺的需求。
缺點:
1.只支持Webpack工程化構建的項目,因為webpack是基于nodeJs的,可以使用require, fs等函數(shù)
2.不支持Vite工程化構建形式,Vite是EsModule純?yōu)g覽器模塊的形式,沒有nodeJs里的函數(shù),只能使用import,但部分第三方庫并不支持,會報奇怪的錯誤
3.前端直傳Minio是無法獲取上傳進度的,自然也就無法顯示進度條,從而無法擁有良好的人機交互感,并且需要等待Minio反饋后才能判斷是否上傳成功
4.端口,登錄賬號,登錄密碼都寫在前端,會暴露關鍵信息,易造成不必要的信息泄露,并且不易維護
5.由前端寫Minio接口不利于之后的擴展,每開一個項目,都需要copy代碼,無形中增加了維護的困難性
總結
到此這篇關于前端使用minio傳輸文件的代碼及拓展的文章就介紹到這了,更多相關前端用minio傳輸文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
BootstrapTable refresh 方法使用實例簡單介紹
本文就bootstrapTable refresh 方法如何傳遞參數(shù)做簡單舉例說明,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-02-02JavaScript模板引擎應用場景及實現(xiàn)原理詳解
這篇文章主要介紹了JavaScript模板引擎應用場景及實現(xiàn)原理,結合實例形式詳細分析了javascript模版引擎的具體應用場景、實現(xiàn)原理、相關操作技巧與注意事項,需要的朋友可以參考下2018-12-12JavaScript類數(shù)組對象轉(zhuǎn)換為數(shù)組對象的方法實例分析
這篇文章主要介紹了JavaScript類數(shù)組對象轉(zhuǎn)換為數(shù)組對象的方法,結合實例形式分析了javascript類數(shù)組對象的功能,以及類數(shù)組對象轉(zhuǎn)換為數(shù)組對象的相關方法與實現(xiàn)技巧,需要的朋友可以參考下2018-07-07