TypeScript前端上傳文件到MinIO示例詳解
什么是MinIO?
MinIO 是一款高性能、分布式的對象存儲系統(tǒng). 它是一款軟件產(chǎn)品, 可以100%的運行在標準硬件。即X86等低成本機器也能夠很好的運行MinIO。
本地Docker部署測試服務(wù)器
docker pull bitnami/minio:latest
# MINIO_ROOT_USER最少3個字符
# MINIO_ROOT_PASSWORD最少8個字符
# 第一次運行的時候,服務(wù)會自動關(guān)閉,手動再次啟動就可以正常運行了.
docker run -itd \
--name minio-server \
-p 9000:9000 \
-p 9001:9001 \
--env MINIO_ROOT_USER="root" \
--env MINIO_ROOT_PASSWORD="123456789" \
--env MINIO_DEFAULT_BUCKETS='images' \
--env MINIO_FORCE_NEW_KEYS="yes" \
--env BITNAMI_DEBUG=true \
bitnami/minio:latest
上傳的API
它有3個API可供調(diào)用:
- putObject 從流上傳
- fPutObject 從文件上傳
- presignedPutObject 提供一個臨時的上傳鏈接以供上傳
使用1和2的方式的話,在前端需要暴露出連接MinIO的訪問密鑰,很不安全,而且官方的Js客戶端壓根就沒想過開放給瀏覽器.
而3的話,可以由服務(wù)端生成一個臨時的上傳鏈接提供給前端上傳之用,而無需要暴露訪問MinIO的密鑰,非常的安全,我采用的是第三種方式.
TypeScript實現(xiàn)
在TypeScript下,我們可用的有三種方式實現(xiàn)文件上傳:
需要注意的是: 事實上,后兩種API都是封裝的XMLHttpRequest.
1. XMLHttpRequest
function xhrUploadFile(file: File, url: string) {
const xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.send(file);
xhr.onload = () => {
if (xhr.status === 200) {
console.log(`${file.name} 上傳成功`);
} else {
console.error(`${file.name} 上傳失敗`);
}
};
}
2. Fetch API
function fetchUploadFile(file: File, url: string) {
fetch(url, {
method: 'PUT',
body: file,
})
.then((response) => {
console.log(`${file.name} 上傳成功`, response);
})
.catch((error) => {
console.error(`${file.name} 上傳失敗`, error);
});
}
3. Axios
function axiosUploadFile(file: File, url: string) {
const instance = axios.create();
instance
.put(url, file, {
headers: {
'Content-Type': file.type,
},
})
.then(function (response) {
console.log(`${file.name} 上傳成功`, response);
})
.catch(function (error) {
console.error(`${file.name} 上傳失敗`, error);
});
}
從后端獲取臨時上傳鏈接
function retrieveNewURL(file: File, cb: (file: File, url: string) => void) {
const url = `http://localhost:8080/presignedUrl/${file.name}`;
axios.get(url)
.then(function (response) {
cb(file, response.data.data.url);
})
.catch(function (error) {
console.error(error);
});
}
上傳文件
function onXhrUploadFile(file?: File) {
console.log('onXhrUploadFile', file);
if (file) {
retrieveNewURL(file, (file, url) => {
xhrUploadFile(file, url);
});
}
}
踩過的坑
1. presignedPutObject方式上傳提交的方法必須得是PUT
我試過了用POST去上傳文件,但是顯然的是:我失敗了.必須得用PUT去上傳.
2. 直接發(fā)送File即可
看了不少文章都是這么干的: 構(gòu)造一個FormData,然后把文件打進去,如果用putObject和fPutObject這兩種方式上傳,這是沒問題的,但是使用presignedPutObject則是不行的,直接發(fā)送File就可以了.
fileUpload(file) {
const url = 'http://example.com/file-upload';
const formData = new FormData();
formData.append('file', file)
const config = {
headers: {
'content-type': 'multipart/form-data'
}
}
return post(url, formData,config)
}
如果使用以上的方式上傳,文件頭會被插入一段數(shù)據(jù),看起來像是這樣子的:
------WebKitFormBoundaryaym16ehT29q60rUx Content-Disposition: form-data; name="file"; filename="webfonts.zip" Content-Type: application/zip
它是遵照了 rfc1867 定義的協(xié)議.
3. 使用Axios上傳的時候,需要自己把Content-Type填寫成為file.type
直接使用XMLHttpRequest和Fetch API都會自動填寫成為文件真實的Content-Type.而Axios則不會,需要自己填寫進去,或許是我不會使用Axios,但是這是一個需要注意的地方,否則在MinIO里邊的Content-Type會被填寫成為Axios默認的Content-Type,或者是你自己指定的.
示例代碼
Github: github.com/tx7do/minio…
- 后端采用go+gin實現(xiàn),用于調(diào)用MinIO的API
presignedPutObject獲取臨時上傳Url. - 前端有React和Vue的實現(xiàn),要實現(xiàn)進度條和多文件上傳也是容易的.
以上就是TypeScript前端上傳文件到MinIO示例詳解的詳細內(nèi)容，更多關(guān)于TypeScript前端上傳到MinIO的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了使用three.js 畫漸變的直線的相關(guān)資料以及具體的實例代碼，有需要的小伙伴可以參考下2016-06-06
這篇文章主要為大家介紹了鮮為人知的JavaScript中5個JSON秘密功能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
正在學(xué)習(xí)Sizzle源碼或有一定前端基礎(chǔ)的同學(xué)們，可以一邊看源碼一邊看這些文章進行驗證，所以雖然我會分析源碼中的正則表達式,有大量的注釋，但不會講正則表達式的基本用法！2015-04-04
數(shù)據(jù)結(jié)構(gòu)TypeScript之鏈表實現(xiàn)詳解
這篇文章主要為大家介紹了數(shù)據(jù)結(jié)構(gòu)TypeScript之鏈表實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
基于Javascript實現(xiàn)頁面商品個數(shù)增減功能
本文給大家介紹基于Javascript實現(xiàn)頁面商品個數(shù)增減功能，通過點擊數(shù)量增減個數(shù)，代碼分為前端頁面，后臺返回代碼，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2019-07-07
這篇文章主要為大家介紹了TypeScript類型實現(xiàn)加減乘除示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
typescript封裝消息提示框插件ew-message使用實戰(zhàn)
這篇文章主要為大家介紹了typescript封裝消息提示框插件ew-message使用實戰(zhàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
FastAdmin表單驗證data-rule插件—Nice-validator的使用方法
FastAdmin的表單驗證data-rule非常方便,也很炫酷,采用的Nice-validator是一款非常強大的表單驗證插件,通過簡單在元素上配置規(guī)則,即可達到驗證的效果,怎么使用Nice-validator插件呢2023-09-09
如今最常用的JavaScript庫之一是RequireJS。最近我參與的每個項目，都用到了RequireJS，或者是我向它們推薦了增加RequireJS。在這篇文章中，我將描述RequireJS是什么，以及它的一些基礎(chǔ)場景。 2016-04-04
TypeScript?5.0?正式發(fā)布及使用指南詳解
這篇文章主要為大家介紹了TypeScript?5.0?正式發(fā)布及使用指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03