如何从 formData 中获取内容？答案

【问题标题】：How do i get the content from a formData?如何从 formData 中获取内容？
【发布时间】：2014-03-14 12:03:28
【问题描述】：

我在 formData 中创建了一个文件，如下所示：

    var fd = new FormData();
    fd.append('file', file);

如何从 formData 中获取内容？像文件名和文件？像这样的东西？：fd.filename()，fd.getData()。或fd.get('file') 取回文件？

【问题讨论】：

标签： javascript html form-data

【解决方案1】：

在您将文件附加到我相信的 formData-object 之后，无法检索这些文件。

您必须将 formData-object 发送到某个地方，然后从 req-object 或类似的东西中获取文件。

就我而言（angularJS + nodeJS），我从 SO 上的答案（链接如下）中对此进行了测试：

角度：

var fd = new FormData();
fd.append('file', file);
$http({
  method:"POST",
  url:"uploadFile",
  data: fd,
  withCredentials: true,
  headers: {'Content-Type': undefined },
  transformRequest: angular.identity
});

节点（expressJS）：

app.post('/uploadFile', function(req,res){
  fs.readFile(req.files.file.path, function(err, data){
    // Do something with the data (which holds the file information)
  });
});

要查看您可以对文件执行哪些操作，请阅读以下内容： http://nodejs.org/api/fs.html

代码取自： AngularJS: how to implement a simple file upload with multipart form?

【讨论】：

【解决方案2】：

你不能像那样得到文件数据。如果要将文件发送到 servlet。试试这个

获取你的文件

var files=document.getElementById('fileID').files[0];

现在将您的文件附加到 formdata 并通过 ajax 发送；

fd.append('file',files);

注意：form enctype 应该是 multipart/formdata

【讨论】：

【解决方案3】：

试试：

 var fd = new FormData();
 fd.append('file', file);

然后使用这个：

   var newfile = fd.get('file');
      console.log(newfile.name);       //filename
      console.log(newfile.size);       //filesize

或者这个用于数组：

 for (var newfile of fd.getAll('file')){
     console.log(newfile.name);
     console.log(newfile.size);
}

然后您可以将文件附加到另一个 FormData：

var newFormData = new FormData();
    newFormData.append('file', newfile);

如果您想从 FormData 中获取所有数据，而不仅仅是文件，请使用 FormData.entries() ：

for (var pair of fd.entries())
    {
     console.log(pair[0]+ ', '+ pair[1]);   //property and value pairs
    }

【讨论】：

【解决方案4】：

您无法获得这样的内容。唯一可用的方法是 append

https://developer.mozilla.org/en-US/docs/Web/API/FormData

【讨论】：

那我该如何解决呢？如果我想保存文件？

【解决方案5】：

看了these Mozilla articles之后，似乎没有办法从FormData对象中获取数据。您只能将它们用于构建要通过 AJAX 请求发送的 FormData。

解决这个问题的一种方法是建立一个常规字典，然后将其转换为 FormData：

var myFormData = {
    key1: 300,
    key2: 'hello world'
};

var fd = new FormData();
for (var key in myFormData) {
    console.log(key, myFormData[key]);
    fd.append(key, myFormData[key]);
}

如果你想调试一个普通的 FormData 对象，你也可以发送它以便在你的开发者工具的网络请求控制台中检查它：

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(fd);

这里有一些概念验证代码到 Drag and Drop files into FormData 并通过 POST 上传到服务器。我还创建了一个JS Bin，您可以在其中进行试验并查看 FormData 对象中的数据是否有帮助。

【讨论】：