TypeScript前端上傳文件到MinIO怎么實現

這篇文章主要講解了“TypeScript前端上傳文件到MinIO怎么實現”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“TypeScript前端上傳文件到MinIO怎么實現”吧！

什么是MinIO?

MinIO 是一款高性能、分布式的對象存儲系統. 它是一款軟件產品, 可以100%的運行在標準硬件。即X86等低成本機器也能夠很好的運行MinIO。

本地Docker部署測試服務器

docker pull bitnami/minio:latest
# MINIO_ROOT_USER最少3個字符
# MINIO_ROOT_PASSWORD最少8個字符
# 第一次運行的時候,服務會自動關閉,手動再次啟動就可以正常運行了.
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可供調用:

• putObject 從流上傳

• fPutObject 從文件上傳

• presignedPutObject 提供一個臨時的上傳鏈接以供上傳

使用1和2的方式的話,在前端需要暴露出連接MinIO的訪問密鑰,很不安全,而且官方的Js客戶端壓根就沒想過開放給瀏覽器.
而3的話,可以由服務端生成一個臨時的上傳鏈接提供給前端上傳之用,而無需要暴露訪問MinIO的密鑰,非常的安全,我采用的是第三種方式.

TypeScript實現

在TypeScript下,我們可用的有三種方式實現文件上傳:

• XMLHttpRequest

• Fetch API

• Axios

需要注意的是: 事實上,后兩種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. 直接發送File即可

看了不少文章都是這么干的: 構造一個FormData,然后把文件打進去,如果用putObject和fPutObject這兩種方式上傳,這是沒問題的,但是使用presignedPutObject則是不行的,直接發送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)
}

如果使用以上的方式上傳,文件頭會被插入一段數據,看起來像是這樣子的:

------WebKitFormBoundaryaym16ehT29q60rUx
Content-Disposition: form-data; 
name="file"; 
filename="webfonts.zip"
Content-Type: application/zip

它是遵照了 rfc1867 定義的協議.

3. 使用Axios上傳的時候,需要自己把Content-Type填寫成為file.type

直接使用XMLHttpRequest和Fetch API都會自動填寫成為文件真實的Content-Type.而Axios則不會,需要自己填寫進去,或許是我不會使用Axios,但是這是一個需要注意的地方,否則在MinIO里邊的Content-Type會被填寫成為Axios默認的Content-Type,或者是你自己指定的.

感謝各位的閱讀，以上就是“TypeScript前端上傳文件到MinIO怎么實現”的內容了，經過本文的學習后，相信大家對TypeScript前端上傳文件到MinIO怎么實現這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！