如何附加具有图像文件和标题的对象数组的表单数据

Question

我有一个图像数组的状态，其中有多个对象，如下所示

[ {title:'' , image:''} , {title:'' , image:''} ]

但我无法将它以 JSON 格式传递给服务器，因为我必须将其转换为 FormData。

我该怎么做.. 我只用简单的图像数组进行了尝试，但它对我来说不起作用。

示例： https://codesandbox.io/s/wizardly-engelbart-4rt6m?file=/src/App.js

我在服务器端使用 multer 进行图像捕获和存储。

export default function AddCity() {
  const [images, setimages] = useState([{ title: "", image: "" }]);

  const handleImages = (e, index) => {
    const { name, value } = e.target;
    const list = [...images];
    list[index][name] = value;
    setimages(list);
  };

  const AddImages = () => {
    setimages([...images, { title: "", contact: "" }]);
  };

  const RemoveImages = index => {
    const list = [...images];
    list.splice(index, 1);
    setimages(list);
  };

  //handle Submit
  const handleSubmit = async e => {
    e.preventDefault();

    var formdata = new FormData();

    for(let i=0 ; i<images.length ;i++){
      ////formdata.append('Images', images[i].image , images[i].image.name )
    }
    

    const url = process.env.REACT_APP_API_HOST;
    axios
      .post(`${url}/city/create`, formdata, {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      })
      .then(res => {
        console.log(res);
      })
      .catch(error => {
        console.log(error);
      });
  };

  return (
    <div className="App">
      <form className="container mt-5">
        <div className="form-group row  ">
          <label htmlFor="rating" className="col-sm-2 col-form-label text-left">
            Images
          </label>
          <div className="col-auto">
            {images.map((item, i) => {
              return (
                <div className="input-group mb-3">
                  <input
                    type="text"
                    name="title"
                    value={item.title}
                    placeholder="Title"
                    onChange={e => handleImages(e, i)}
                    className="form-control"
                    aria-label="Text input with segmented dropdown button"
                  />
                  <div className="input-group-append">
                    <input
                      type="file"
                      className="form-control-file mt-2 ml-1"
                      id="images"
                      onChange={e => handleImages(e, i)}
                    />

                    {images.length - 1 === i && (
                      <button
                        type="button"
                        className="btn btn-outline-info"
                        onClick={AddImages}
                      >
                        Add
                      </button>
                    )}
                    {images.length !== 1 && (
                      <button
                        type="button"
                        className="btn btn-outline-danger"
                        onClick={() => RemoveImages(i, images)}
                      >
                        Remove
                      </button>
                    )}
                    <br />
                    <br />
                    <br />
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <br />
        <br />
        <button
          type="submit"
          onClick={handleSubmit}
          className="btn btn-primary form-group"
        >
          Submit
        </button>
      </form>
    </div>
  );
}

Answer 1

这应该可以工作

var formdata = new FormData();

images.map(image => {
  formdata.append(image.title, image.image)
)}