无法使用 React dropzone 上传图片

Question

我正在使用 react-dropzone 来获取我的 react 应用程序上的文件，并且我正在尝试使用 axios 上传这些多个图像。后端在 mongo+express 中。但是，由于某些原因，后端没有收到图像。 我的反应代码是：

  const data = new FormData();
  data.append("title", entry.title);
entry.images.forEach((image, index) => {
console.log(image) 
/*This prints out
File
​​
lastModified: 1599303132607
​​
name: "name.jpg"
​​
path: "name.jpg"
​​
size: 41142
​​
type: "image/jpeg"
​​
webkitRelativePath: ""
*/
    data.append("images", {
      name: "image" + index,
      type: "image/jpeg",
      uri: image,
    });
  });
return http.post(
    "/" + dataEndPoint,
    data,
  );

拖放元素如下：

  const handleDrop = (acceptedFiles) => {
    setFileNames(acceptedFiles.map((file) => file.name));
    files(acceptedFiles);
  };
  return (
    <div
      style={{
        textAlign: "center",
        padding: 20,
        borderRadius: 0.2,
        borderStyle: "dashed",
        backgroundColor: "#fafafa",
        color: "#bdbdbd",
        marginBottom: 10,
      }}
    >
      <Dropzone
        onDrop={handleDrop}
        accept="image/*"

        // minSize={1024}
        // maxSize={3072000}
      >
        {({
          getRootProps,
          getInputProps,
          isDragActive,
          isDragAccept,
          isDragReject,
        }) => {
          // additional CSS depends on dragging status
          const additionalClass = isDragAccept
            ? "accept"
            : isDragReject
            ? "reject"
            : "";

          return (
            <div
              {...getRootProps({
                className: `dropzone ${additionalClass}`,
              })}
            >
              <input {...getInputProps()} />
              <span>{isDragActive ? "????" : "????"}</span>
              <p>Drag'n'drop images, or click to select files</p>
            </div>
          );
        }}
      </Dropzone>
      {fileNames.length > 0 && (
        <div>
          <strong>Images:</strong>
          <ul>
            {fileNames.map((fileName) => (
              <li key={fileName}>{fileName}</li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );

在后端，当我记录 req.body.images 时，它会显示 [ '[object Object]', '[object Object]' ]。 所以，当我尝试记录这个数组时，它实际上会注销每个字符：

1 o
2 b
3 j
4 e
5 c
6 t
7  
8 O
9 b
10 j
11 e
12 c
13 t
14 ]

有谁知道我可能做错了什么？ 附言我尝试过在客户端使用不同的标头。没有任何效果

Answer 1

使用 FormData，您应该使用顺序名称添加每个文件。像这样：

const fd = new FormData();

files.forEach((file, index) => {
   fd.set(`file[${index}]`, file, file.name);
});

您的服务器应该能够将其解释为来自客户端的文件数组。