时间戳

首页 > 解决方案 > 为什么不附加到数据？

reactjs - 为什么不附加到数据？

问题描述

我有一个用于处理将文件上传到 API 的功能，我已将问题缩小到我尝试创建的 formData(at data variable) 似乎什么也没得到。函数循环通过的 selectedFiles 总是充满一个或多个文件（使用控制台日志检查）。每当我尝试 console.log(data) 时，即使我附加了它们，它也没有来自 selectedFiles 的文件，所以我一直只是将空的 formData 发送到我的 API。我可能没有正确附加数据？？？

这是 fileUploader 函数：

const fileUploader = () => {
    const data = new FormData();

    if (selectedFiles) {

      //for loop to loop through the selected files and add them to the form data
      for (let i = 0; i < selectedFiles.length; i++) {
        data.append(selectedFiles[i].name, selectedFiles[i]);
      }

      axios
        .post(
          `http://localhost:3030/api/listings/${listingId}/uploadimages`,
          data,
          {
            headers: {
              accept: 'application/json',
              'Accept-Language': 'en-US,en;q=0.8',
              'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
            },
          }
        )
        .then((res) => {
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    }
  };

标签： reactjs

解决方案

从技术上讲，一个表单允许有许多同名字段，因此多次调用 append 会添加更多同名字段。

尝试这个

  for (let i = 0; i < selectedFiles.length; i++) {
    data.append("files[]", selectedFiles.files[i]);
  }

推荐阅读