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

【问题标题】：How to convert a JavaScript Object into an actual file in order to upload with HTML5如何将 JavaScript 对象转换为实际文件以便使用 HTML5 上传
【发布时间】：2023-03-18 03:10:01
【问题描述】：

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

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

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

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

有没有办法：

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

或

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

提前致谢。

【问题讨论】：

POST 与上传不会有显着的速度差异。您将获得的只是一个进度条。
确实，我应该更清楚。我知道我们不会看到任何速度差异，这纯粹是我们追求的进度条，以便在这个漫长的过程中提供用户反馈。我已经编辑了我的问题以反映这一点。

标签： javascript

【解决方案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);

【讨论】：

完美！这正是我一直在寻找的。也很简单！非常感谢fuzic。

【解决方案2】：

转换为Blob对象或File对象，然后追加到FormData，并使用xhr或fetch发送到服务器。

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

【讨论】：