使用 FormData 时未获取文件数据答案

【问题标题】：Not getting the file data while FormData is used使用 FormData 时未获取文件数据
【发布时间】：2019-09-20 18:38:56
【问题描述】：

这里我想打golang的api来使用javascript在本地系统上传文件。为了获取文件的键值对，我在 javascript 中读取了 FormData 方法并在我的代码中使用了它，但是在我分配数据时它不会获取键值。我已经发布了我的代码。

function uploadFile(){
          var url = "http://localhost:8081/shapi/v1/upload";
          var archivoSeleccionado = document.getElementById("myfile");
          var file = archivoSeleccionado.files[0];
          var f = new FormData();
          console.log(file)
          f.append("file", file);
          console.log("f", f)
          var xmlHTTP= new XMLHttpRequest();
          xmlHTTP.open("POST", url, true);
          xmlHTTP.send(f);
}

在console.log(file)的控制台中会打印出来

File { name: "541660.jpg", lastModified: 1537849576000, webkitRelativePath: "", size: 243477, type: "image/jpeg" }

在console.log("f", f)的控制台中会打印：-

FormData {  }

谁能告诉我代码中的问题？

可运行片段

function uploadFile() {
  var archivoSeleccionado = document.getElementById("myfile");
  var file = archivoSeleccionado.files[0];
  var f = new FormData();
  console.log(file)
  f.append("file", file);
  console.log("f", f)
}

<input id="myfile" type="file" />
<button onclick="uploadFile()">Upload</button>

【问题讨论】：

标签： javascript file-upload upload

【解决方案1】：

这只是因为当您记录FormData时，默认情况下它不会暴露它上面的内容，您必须明确获取它，您可以使用get(key)或values()来做到这一点

function uploadFile() {
  var archivoSeleccionado = document.getElementById("myfile");
  var file = archivoSeleccionado.files[0];
  var f = new FormData();
  console.log(file)
  f.append("file", file);
  console.log("f", f.get("file"))
}

<input id="myfile" type="file" />
<button onclick="uploadFile()">Upload</button>

【讨论】：