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

发布于 2025-01-10 16:40:09 字数 1311 浏览 0 评论 0原文

我有一个场景，我需要上传 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 package 。

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

原文

I have a scenario that I need to upload an zip file.

In the zip file, there are lots of image files which will upload to AWS S3.

Because of the large amount of files in that zipfile, I want to get the information of upload process. In my opinion, the way I can get information is by using streaming response. Once server uploaded a file, respon a json to client.

Every time I upload a image to S3, I want to response a json object like the example bellow.
example for json streaming response:

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

I'm trying to achieve this approach by using vue(cdn version) + axios(cdn version).
The code bellow which is how I upload my zip file.

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!")
        }
    })
}

but those examples I found are using axios npm package which I can't use.

Is there any recommend method or any resources that I can search?
Thanks for helping!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空‖城人不在 2025-01-17 16:40:09

您可以尝试使用 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)
  });
});

You can try using fetch instead like this:

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

回复收藏 0 原文

~没有更多了~