Vue中通過minio上傳文件的詳細(xì)步驟
在Vue中minio上傳文件(stream流和鏈接)
1、minio的安裝
直接使用npm或者cnpm下載即可
npm i minio --save //或者 cnpm i minio --save
2、minio.js文件
封裝了連接minio、文件上傳,文件刪除等方法
注:此文件中的url都是在minio設(shè)置了永久鏈接的基礎(chǔ)上
2.1連接minio
const minioClient = new Minio.Client({ endPoint: 'xxx.xxx.x.xxx', // 地址 port: xx, // 端口號(hào),若地址為類似test.minio.com,就不必寫端口號(hào) useSSL: false, // 是否使用ssl accessKey: '', // 登錄的accessKey secretKey: '' // secretKey });
2.2通過stream流上傳
const stream = require('stream') const Minio = require('minio') import { getNowTime } from "@common/publicmethods" /** * * @export 上傳文件(stream流方法) * @param {*} backetName String 存儲(chǔ)桶名字 * @param {*} fileObj Object 文件對(duì)象 * @param {*} path String 文件存儲(chǔ)路徑 * @param {*} vm Object 調(diào)用該方法的頁面的this * @return {*} null */ export function uploadMinIo(backetName,fileObj, path, vm) { if ( fileObj ) { let file = fileObj; console.log("file", file); //判斷是否選擇了文件 if (file == undefined) { //未選擇 } else { //選擇 // 獲取文件類型及大小 // 給文件名加上當(dāng)前時(shí)間 const fileName = getNowTime("time") + file.name; const fileDate = getNowTime("fileDate") // 生成以日為分類的文件夾 const mineType = file.type; const fileSize = file.size; console.log("fileName", fileName); //參數(shù) let 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."); return console.log(err); } //準(zhǔn)備上傳 let reader = new FileReader(); console.log(reader); reader.readAsDataURL(file); reader.onloadend = function (e) { //讀取完成觸發(fā),無論成功或失敗 console.log("ee", e); const dataurl = e.target.result; //base64轉(zhuǎn)blob const blob = toBlob(dataurl); //blob轉(zhuǎn)arrayBuffer let reader2 = new FileReader(); reader2.readAsArrayBuffer(blob); reader2.onload = function (ex) { //定義流 let bufferStream = new stream.PassThrough(); //將buffer寫入 bufferStream.end(Buffer.from(ex.target.result)); //上傳 minioClient.putObject( backetName, `${path}/${fileDate}/${fileName}`, bufferStream, fileSize, metadata, function (err, etag) { // console.log("dddddd"); if (err == null) { // 為空則代表上傳成功 let res = { path: `http://192.168.0.226:30014/${backetName}/${path}/${fileDate}/${fileName}`, result: 1, }; // 成功生成url后調(diào)用 // 調(diào)用傳進(jìn)來的this的的方法,然后通過該方法把成功事件發(fā)送出去 vm.handleAvatarSuccess(res, vm.filedname); vm.fileName = fileName; vm.$message({ message: "上傳成功!", type: "success", }); // 由于minio設(shè)置了永久鏈接,該生成臨時(shí)url的方法就不再使用 // minioClient.presignedGetObject( // "medialibrary", // `archive${a}${fileName}`, // 24 * 60 * 60, // function (err, presignedUrl) { // if (err) return console.log(err); // let res = { // path: presignedUrl, // result: 1, // }; // // 成功生成url后調(diào)用 // vm.handleAvatarSuccess(res, vm.filedname); // vm.fileName = fileName; // vm.$message({ // message: "上傳成功!", // type: "success", // }); // console.log("鏈接:",presignedUrl); // } // ); } } ); }; }; }); } } else { this.$message({ message: "文件類型錯(cuò)誤!", type: "error", }); } }
2.3通過帶預(yù)簽名的url上傳(最好是minio設(shè)置了鏈接永久訪問)
1.先拿到預(yù)簽名鏈接
2.再通過預(yù)簽名上傳文件
// 兩個(gè)參數(shù),存儲(chǔ)桶的名字,要上傳文件的名字。例如test.txt /** * * @export 獲取上傳鏈接(url方法)獲取上傳的url;會(huì)生成一個(gè)帶預(yù)簽名的鏈接 * @param {*} bucket String 存儲(chǔ)桶的名字 * @param {*} totalFolderName String 總文件夾名字 例如:imagelibrary * @param {*} fileName String 文件名字 * @return {*} Promise */ export function getUploadUrl(bucket, totalFolderName,fileName) { let defaultPath = getNowTime("fileDate"); // 添加默認(rèn)的以日為分類的文件夾 return minioClient.presignedPutObject(bucket, `${totalFolderName}/${defaultPath}/${fileName}`) } // 通過url上傳 /** * * @export 上傳文件(url方法)通過獲取帶預(yù)簽名的鏈接上傳 * @param {*} url String 預(yù)簽名鏈接 * @param {*} data Object 文件對(duì)象 * @return {*} Promise */ export function uploadByUrl(url, data) { return fetch(url, { mode: "cors", // 解決跨域 headers: { Accept: "application/json,text/plain,/", }, method: "PUT", body: data, }); }
2.4刪除對(duì)象
/** * @export 從存儲(chǔ)桶中刪除一個(gè)對(duì)象 * @param {*} bucketName 存儲(chǔ)桶的名字 * @param {*} objectPathAndName 要?jiǎng)h除對(duì)象的路徑(注意:要寫對(duì)路徑,緊跟存儲(chǔ)桶后面的路徑) * @description * @author * @version V1.0.0 * @return {*} Promise */ export function removeObject(bucketName,objectPathAndName){ return minioClient.removeObject(bucketName, objectPathAndName) }
補(bǔ)充:base64轉(zhuǎn)blob
/** * * @export base64轉(zhuǎn)blob * @param {*} base64Data Object base64數(shù)據(jù) * @return {*} blob */ //base64轉(zhuǎn)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]) } // 獲取文件類型 let mimeString = base64Data.split(';')[0].split(":")[1] // mime類型 // ArrayBuffer 對(duì)象用來表示通用的、固定長度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū) // let arrayBuffer = new ArrayBuffer(byteString.length) // 創(chuàng)建緩沖數(shù)組 // let uintArr = new Uint8Array(arrayBuffer) // 創(chuàng)建視圖 let uintArr = new Uint8Array(byteString.length) // 創(chuàng)建視圖 for (let i = 0; i < byteString.length; i++) { uintArr[i] = byteString.charCodeAt(i) } // 生成blob const blob = new Blob([uintArr], { type: mimeString }) // 使用 Blob 創(chuàng)建一個(gè)指向類型化數(shù)組的URL, URL.createObjectURL是new Blob文件的方法,可以生成一個(gè)普通的url,可以直接使用,比如用在img.src上 return blob }
3、獲取時(shí)間方法
publicmethods.js
/** * * * @export 獲取當(dāng)前時(shí)間并格式化 * @param {*} isDate Boolean 為真返回時(shí)分秒; 為"time"返回不帶連接符的時(shí)分秒;為"fileDate"返回文件夾日期 * @return {*} yyyy-MM-dd hh:mm:ss */ export function getNowTime(isDate = false) { var now = new Date(); var year = now.getFullYear(); //得到年份 var month = now.getMonth(); //得到月份 var date = now.getDate(); //得到日期 var hh = now.getHours(); var mm = now.getMinutes(); var ss = now.getSeconds(); var hour = " " + hh + ":" + mm + ":" + ss + ""; //默認(rèn)時(shí)分秒 如果傳給后臺(tái)的格式為年月日時(shí)分秒,就需要加這個(gè),如若不需要,此行可忽略 var hours = hh + '' + mm + '' + ss + "-"; month = month + 1; month = month.toString().padStart(2, "0"); date = date.toString().padStart(2, "0"); var defaultDate = `${year}-${month}-${date}${hour}`; if (isDate) { var defaultDate = `${year}-${month}-${date}`; } if (isDate == 'time') { // 返回給文件前添加的時(shí)間 var defaultDate = `${year}${month}${date}${hours}`; } if (isDate == 'fileDate') { // 返回默認(rèn)創(chuàng)建文件夾的時(shí)間 var defaultDate = `${year}${month}${date}`; } return defaultDate; }
4、minio設(shè)置鏈接永久訪問(客戶端)
注意: 在設(shè)置永久訪問后,地址上會(huì)有默認(rèn)的路徑:"/minio",需要把它去掉即可正常訪問
5、解決跨域問題
修改如下文件中的配置
ingress: enabled: true labels: {} # node-role.kubernetes.io/ingress: platform annotations: kubernetes.io/ingress.class: nginx # kubernetes.io/tls-acme: "true" # kubernetes.io/ingress.allow-http: "false" # kubernetes.io/ingress.global-static-ip-name: "" # nginx.ingress.kubernetes.io/secure-backends: "true" # nginx.ingress.kubernetes.io/backend-protocol: "HTTPS" # nginx.ingress.kubernetes.io/whitelist-source-range: 0.0.0.0/0 nginx.ingress.kubernetes.io/cors-allow-headers: DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,token,Cookie,x-amz-content-sha256,x-amz-date nginx.ingress.kubernetes.io/cors-allow-methods: PUT, GET, POST, OPTIONS, DELETE nginx.ingress.kubernetes.io/cors-allow-origin: '*' nginx.ingress.kubernetes.io/enable-cors: 'true'
6、存儲(chǔ)大小限制問題
加上下面一行就可以了
7、minio官方文檔
8、minio設(shè)置鏈接永久訪問(其他方法)
總結(jié)
到此這篇關(guān)于Vue中通過minio上傳文件的文章就介紹到這了,更多相關(guān)Vue minio上傳文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue+element?ui表格添加多個(gè)搜索條件篩選功能(前端查詢)
這篇文章主要給大家介紹了關(guān)于vue+element?ui表格添加多個(gè)搜索條件篩選功能的相關(guān)資料,最近在使用element-ui的表格組件時(shí),遇到了搜索框功能的實(shí)現(xiàn)問題,需要的朋友可以參考下2023-08-08關(guān)于下拉類型多選組件Vue-Treeselect(鍵名轉(zhuǎn)換)
這篇文章主要介紹了關(guān)于下拉類型多選組件Vue-Treeselect(鍵名轉(zhuǎn)換),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07解決vue做詳情頁跳轉(zhuǎn)的時(shí)候使用created方法 數(shù)據(jù)不會(huì)更新問題
這篇文章主要介紹了解決vue做詳情頁跳轉(zhuǎn)的時(shí)候使用created方法 數(shù)據(jù)不會(huì)更新問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue-router中的鉤子函數(shù)和執(zhí)行順序說明
這篇文章主要介紹了vue-router中的鉤子函數(shù)和執(zhí)行順序說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07詳解Vue+elementUI build打包部署后字體圖標(biāo)丟失問題
這篇文章主要介紹了詳解Vue+elementUI build打包部署后字體圖標(biāo)丟失問題,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07