日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

作者：喵個咪 ? 更新時間： 2022-11-23 編程語言

什么是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,或者是你自己指定的.

示例代碼

Github: github.com/tx7do/minio…

  • 后端采用go+gin實現,用于調用MinIO的APIpresignedPutObject獲取臨時上傳Url.
  • 前端有React和Vue的實現,要實現進度條和多文件上傳也是容易的.

原文鏈接：https://juejin.cn/post/7153078635551784990

欄目分類
最近更新