我如何 post 使用 formdata reactjs 的图像数组

Question

我正在尝试 post 一个包含多个图像的对象作为数组如何将图像作为数组附加到表单数据

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

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

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

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

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

const formData = new FormData(myFormElement);

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

我如何 post 使用 formdata reactjs 的图像数组

How do I post an Array of images using formdata reactjs

javascript

multipartform-data

reactjs

axios