Question

我正在尝试将具有多个图像的对象作为数组发布如何将图像作为数组附加到表单数据中

const onSubmit = async (e) => {

    
    const formData = new FormData(); 
    formData.append("image", values.images);
    formData.append("title", values.title);
    formData.append("price", values.price);
    formData.append("quantity", values.quantity);
    formData.append("id", id);

    try {
      const res = await axios.post(
        "//localhost:4000/products/saveProduct",
        formData,
        {
          headers: {
            "Content-Type": "multipart/form-data",
          },
     /////////////
<form onSubmit={handleSubmit(onSubmit)}>
        <div className="custom-file mb-4">
          <input
            type="file"
            className="custom-file-input"
            name="image"
            multiple
            placeholder="choose file"
            onChange={handleChange}
          />
//////
  const handleChange = (e) => {
    const { type, name } = e.target;
    const getValue = () => {
      if (type === "checkbox") {
        return e.target.checked;
      } else if (type === "select-multiple") {
        return Array.from(e.target.selectedOptions).map(
          (option) => option.value
        );
      } else if (type === "file") {
        for (let i = 0; i < e.target.files.length; i++) {
          e.target.files[i].url = URL.createObjectURL(e.target.files[i]);
        }
        return Array.from(e.target.files);
      }
      return e.target.value;
    };

此外，当我将它发送到我的后端时，我得到了一个空对象作为 req.body

Answer 1

您可以将所有图像附加到同一个键，例如“图像”。然后就可以在服务器上将请求体解析为multipart formdata，访问“images”时得到一个文件数组。

for (const image of value.images) {
  formData.append("images", image);
}

不过，如果我没记错的话。当你只追加一个文件时，它不会被解析成服务器上的数组。

另一种解决方案是创建（使用 useRef）或获取（使用 querySelector）对表单元素的引用。然后就可以直接从表单元素创建 formData 了。

const formData = new FormData(myFormElement);

然后您可以附加要发送的其余数据。

如何使用 formdata reactjs 发布图像数组

1 个答案: