來自 POST 請求的 Streaming Chunk json 數據

Question

我有一個場景，我需要上傳一個 zip 文件。

在 zip 文件中，有很多圖像文件將上傳到 AWS S3。

由於那個壓縮文件中的文件量很大，所以我想獲取上傳過程的信息。 在我看來，我獲取信息的方式是使用流式響應。 服務器上傳文件后，向客戶端響應 json。

每次我將圖像上傳到 S3 時，我都想像下面的示例一樣響應 json object。 json 流響應的示例：

{
   "file_name": "imgae1.jpg",
   "s3_url": "http://s3.url/key/to/file",
   "other_key": "key for this uploaded file"
}

我正在嘗試通過使用 vue（cdn 版本）+ axios（cdn 版本）來實現這種方法。 下面的代碼是我上傳 zip 文件的方式。

function upload() {
    var file = document.querySelector("#upload_file")
    if (file.files.length <= 0) return

    var formData = new FormData();
    formData.append("file", file.files[0]);
    formData.append("form_data", "form_data");

    axios({
        method: 'post',
        url: "http://127.0.0.1:8000/",
        headers: {
            'Content-Type': 'multipart/form-data'
        },
        responseType: 'stream',
        data: formData
    }).then(function (response) {
        if (response.status >= 200 && response.status < 300) {
            alert("All images uploaded!")
        }
    })
}

但是我發現的那些例子使用的是axios npm package我不能使用。

有什么推薦的方法或者資源可以搜索嗎？ 感謝您的幫助！

Answer 1

您可以像這樣嘗試使用 fetch ：

fetch("http://example.url", {
  method: "POST",
  body: formData,
  mode: "no-cors",
  header: {
    "Content-Type": "multipart/form-data",
  },
}).then((response) => {
  a = response.clone();
  a.json().then((data) => {
    //console.log('data', data)
  });
});