15

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

我们目前正在通过简单的 ajax POST 将数据发送到服务器，但由于数据太大，用户的等待时间是不可接受的。

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

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

有没有办法：

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

或者

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

提前致谢。

4

2 回答 2

18

可以获取一个 JavaScript 对象myData（您可以使用进度（在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);
于 2013-01-04T01:19:20.683 回答
2

转换为Blobobject 或Fileobject，然后附加到FormData，并使用xhrorfetch发送到服务器。

var data = 'some data'; //string, arrary buffer, typed array, blob, ...
var filename01 = 'abc.txt', filename02 = 'efg.txt';
var type = 'text/plain';
var fd = new FormData();

//use file object
var file = new File([data], filename01, {type:type}); //add filename here
fd.append('file01', file);

//use blob object
var blob = new Blob([data], {type:type});
fd.append('file02', blob, filename02); //add filename by append method

fetch('/server.php', {method:'POST', body:fd})
.then(function(res){
    return res.text();
})
.then(console.log)
.catch(console.error)
;
于 2016-08-13T19:24:58.560 回答