从POST请求流式传输Chunk json数据

Question

我有一个场景需要上传一个zip文件。

在zip文件中，有许多图像文件将上传到AWS S3。

由于该zip文件中有大量文件，我想了解上传过程的信息。在我看来，我获取信息的方式是使用流媒体响应。一旦服务器上传了一个文件，就向客户端响应一个json。

每次我将图像上传到S3时，我都希望响应一个json对象，如下面的示例所示。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包，我不能使用。

有什么推荐方法或资源可以搜索吗？谢谢你的帮助！

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)
});
});