javascript 如何在fetch post请求中添加从input.files复制的文件数组到formData？

brccelvz 于 2023-06-28 发布在 Java

关注(0)|答案(1)|浏览(107)

我在做一个用户可以上传多张照片的应用程序。当他们打开<input type="file" multiple>时，我监听更改事件，创建这些文件的伪数组，并动态创建图像，供用户在上传前预览。

fauxArray = Array.from(e.target.files);
    for (image of fauxArray) {
      let newImage = document.createElement("IMG");
      newImage.src = URL.createObjectURL(image);
    }

我这样做是为了让用户可以决定不上传所有的文件，并且在实际保存到服务器之前删除一些文件。所以我在每个图像旁边都有一个按钮，如果他们使用它，我会相应地更改fauxArray。
当我尝试将此添加到fetch请求时发生问题。

const formData     = new FormData();

formData.append( 'memoryPhotos', fauxArray ); // <- HERE
formData.append( 'memoryTitle', packageTitle );
formData.append( 'memoryDescription', packageDescription );

fetch("gui/save.php", {
  method: "post",
   body: formData,
})

因为在PHP端，当我用$_POST['memoryPhotos']读取它时，我只得到字符串[object File],[object File]（如果有2个文件等）。
如何将我的文件数组附加到要在服务器上读取的formdata？或者我是否使用了错误的格式来复制输入的图像？

JavaScript

来源：https://stackoverflow.com/questions/76568722/how-to-add-an-array-of-files-duplicated-from-input-files-to-formdata-in-fetch-po

1条答案

按热度按时间

e4eetjau1#

你应该读取照片的数据并将它们序列化，例如作为数据url。要发布JS对象，您需要将其序列化为JSON并在php端使用json_decode()。您可以在JS模块中使用await Promise.all，而无需 Package async函数。

const formData     = new FormData();

const readFile = async (file) => new Promise((resolve, reject) => {
 
  const reader = new FileReader();
  reader.onerror = reject;
  reader.onload = resolve(reader.result);
  reader.readAsDataURL(file);
 
});

(async () => {

  const photos = await Promise.all(fauxArray.map(async (file) => {
    return {
      name: file.name,
      dataURL: await readFile(file);
    };
  }));

  formData.append( 'memoryPhotos', JSON.stringify(photos)); // <- HERE
  formData.append( 'memoryTitle', packageTitle );
  formData.append( 'memoryDescription', packageDescription );

  fetch("gui/save.php", {
    method: "post",
     body: formData,
  });

})();

赞(0）回复(0）举报 2023-06-28

我来回答

javascript 如何在fetch post请求中添加从input.files复制的文件数组到formData？

1条答案

相关问题

热门标签

最新问答