javascript - 如何将 JavaScript 对象转换为实际文件以便使用 HTML5 上传

Question

我有一个 JavaScript 对象，其中包含大量数据，包括几个大的 base64 编码字符串。

我们目前通过简单的 ajax POST 将数据发送到服务器，但由于数据如此之大，用户的等待时间是 Not Acceptable 。

出于这个原因，我们希望利用新的 html5 文件上传功能并实际测量数据上传到服务器的进度，以便在这个漫长的过程中为用户提供持续的反馈。

为了使用这个特性，这个大数组必须作为一个实际文件发送，而不是作为一个巨大的对象作为 url 参数发送。

有什么办法可以:

一个。将此对象转换为实际的文本文件并以这种方式发送。

或

B. Hook html5 progress api 并实际测量此标准 ajax POST 的进度。

提前致谢。

Answer 1

可以获取一个 JavaScript 对象 (myData)，将其字符串化为 JSON，将其打包为 mimetype JSON 的 Blob，然后使用 HTML5 上传 API 将其发送到服务器。您可以使用进度(在 progress 回调函数中)更新 HTML5 进度条的值。

var myData = {
    data1: "Huge amount of data",
    data2: "More very large data"
};

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', function (e) {
    console.log(100*(e.loaded / e.total) + '%');
}, false);

xhr.open('POST', 'url', true);

var data = new FormData();
data.append('file', new Blob([JSON.stringify(myData)],{type:'application/json'}));
xhr.send(data);