欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

TypeScript前端上傳文件到MinIO示例詳解

 更新時間：2022年10月11日 15:45:11   作者：喵個咪  
這篇文章主要為大家介紹了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)用:

使用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的APIpresignedPutObject獲取臨時上傳Url.
  • 前端有React和Vue的實現(xiàn),要實現(xiàn)進度條和多文件上傳也是容易的.

以上就是TypeScript前端上傳文件到MinIO示例詳解的詳細內(nèi)容，更多關(guān)于TypeScript前端上傳到MinIO的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論