时间戳

首页 > 解决方案 > 使用 FormData 时未获取文件数据

javascript - 使用 FormData 时未获取文件数据

问题描述

这里我想打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>

标签： javascriptfile-uploadupload

解决方案

这只是因为当你记录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>

推荐阅读