純前端使用Vue3上傳文件到minio文件服務(wù)器(粘貼可直接用)
更新時(shí)間：2024年04月03日 09:55:19 作者：老是寫B(tài)ug
vue是目前最流行的前端框架,下面這篇文章主要給大家介紹了關(guān)于純前端使用Vue3上傳文件到minio文件服務(wù)器的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
1、首先安裝minio的插件，因?yàn)槲沂褂玫膙ue3，不支持模塊化的導(dǎo)入，所以我們使用一個(gè)別人寫好的vue2的包
npm install --save minio-js
2、在需要上傳文件的頁(yè)面導(dǎo)入這個(gè)包
import { Minio } from "minio-js";3、創(chuàng)建一個(gè)minio的客戶端
minioClient = new Minio.Client({
endPoint: '192.168.1.111', // minio的ip，直接替換自己的即可
port: 9000, // 端口號(hào)，若地址為類似test.minio.com,就不必寫端口號(hào)
useSSL: false, // 是否使用ssl
accessKey: accessKey, // 登錄的accessKey
secretKey: secretKey,
sessionToken: token,
});這里說明一下，accessKey、secretKey、sessionToken都是通過接口獲取到的臨時(shí)憑證
4、通過帶預(yù)簽名的url上傳，首先我們需要獲取到這個(gè)url,minioAPI提供了， minioClient.presignedPutObject可以獲取帶簽名的URL
function uploadByUrl(url, data) {
loadding.value = true;
return fetch(url, {
mode: "cors", // 解決跨域
headers: {
Accept: "application/json,text/plain,/",
},
method: "PUT",
body: data,//data就是文件對(duì)象
}).then((response) => {
if (response.ok) {
// 處理成功的情況
loadding.value = false;
proxy.$modal.msgSuccess("上傳成功");
} else {
// 處理失敗的情況
proxy.$refs["my-upload"].clearFiles();
throw new Error("上傳失敗，請(qǐng)重新上傳！");
}
});
}
//獲取上傳的URL
minioClient.presignedPutObject(
bucketName,//桶名稱
fileName,//文件名稱
1000 * 60 * 5,//URL有效期
function (err, presignedUrl) {//錯(cuò)誤的回調(diào)方法
if (err) return console.log(err);
let url = presignedUrl;
uploadByUrl(url, fileObj.value);
}
);總結(jié)
到此這篇關(guān)于純前端使用Vue3上傳文件到minio文件服務(wù)器的文章就介紹到這了,更多相關(guān)Vue3上傳文件到minio文件服務(wù)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue之Dep和Observer的用法及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家詳細(xì)介紹了vue懸浮表單復(fù)合組件開發(fā)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了基于vue如何發(fā)布一個(gè)npm包的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue路由切換時(shí)取消之前的所有請(qǐng)求操作
這篇文章主要介紹了vue路由切換時(shí)取消之前的所有請(qǐng)求操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-09-09
詳解Vue2 無(wú)限級(jí)分類(添加,刪除,修改)
本篇文章主要介紹了詳解Vue2 無(wú)限級(jí)分類(添加,刪除,修改) ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-03-03
不同于vue2不需要被use使用,vue3的機(jī)制是你的指令必須要被注冊(cè)成方法的,這樣你才能全局使用到自定義指令,下面這篇文章主要給大家介紹了關(guān)于vue3自定義指令的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue實(shí)現(xiàn)關(guān)鍵字高亮效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)關(guān)鍵字高亮效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
這篇文章主要為大家介紹了Vue3通用API功能示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
vue項(xiàng)目,代碼提交至碼云,iconfont的用法說明
這篇文章主要介紹了vue項(xiàng)目,代碼提交至碼云,iconfont的用法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-07-07
解決vue使用vant輪播組件swipe + flex時(shí)文字抖動(dòng)問題
這篇文章主要介紹了解決vue使用vant輪播組件swipe + flex時(shí)文字抖動(dòng)問題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-01-01