Question

我目前正在尝试将多个filepond组件/实例集成到我的react应用程序中，其中图像通过按钮/表单提交上传。

我或多或少地使用下面的代码，但是当我在route.js文件中注销结果时得到了不确定的结果，即使当我在upload.js中注销了commit的状态时，我确实得到了结果。

我尝试仅注销req.files，它返回undefined，我下面使用的方法直接来自multers文档，并且注销- TypeError：无法读取undefined的属性“ 0”

谢谢

upload.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import "./styles.css";

import { FilePond, registerPlugin } from "react-filepond";
import "filepond/dist/filepond.min.css";
// import FilePondPluginFileEncode from 'filepond-plugin-file-encode';
import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css";

// Register the plugins
registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);

const API_BASE = "http://localhost:5000";

function submitForm(contentType, data, setResponse) {
  axios({
    url: `${API_BASE}/upload`,
    method: "POST",
    data: data,
    headers: {
      "Content-Type": contentType
    }
  })
    .then(response => {
      setResponse(response.data);
    })
    .catch(error => {
      setResponse("error");
    });
}

function App() {
  const [title, setTitle] = useState("");
  const [file, setFile] = useState("");
  const [file3, setFile3] = useState("");
  const [desc, setDesc] = useState("");

  function uploadWithFormData() {
    const formData = new FormData();
    formData.append("title", title);

    formData.append("file", file);

    formData.append("file3", file3);

    formData.append("desc", desc);

    submitForm("multipart/form-data", formData, msg => console.log(msg));
  }

  return (
    <div className="App">
      <h2>Upload Form</h2>
      <form>
        <label>
          File Title
          <input
            type="text"
            vaue={title}
            onChange={e => {
              setTitle(e.target.value);
            }}
            placeholder="Give a title to your upload"
          />
        </label>

        <FilePond
          name={file}
          files={file}
          allowMultiple={false}
          server={null}
          instantUpload={false}
          onupdatefiles={setFile}
        />

        <FilePond
          name={file3}
          files={file3}
          allowMultiple={false}
          server={null}
          instantUpload={false}
          onupdatefiles={setFile3}
        />

        <label>
          Description
          <textarea value={desc} onChange={e => setDesc(e.target.value)} />
        </label>

        <input
          type="button"
          value="Upload as Form"
          onClick={uploadWithFormData}
        />
      </form>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

routes.js

router.post('/', upload.fields([{ name: 'file'}, { name: 'file3' }]), (req, res) => {

 console.log(req.files['file'][0]);
 console.log(req.files['file3'][0]);

  var movieData = {
    desc: req.body.desc,
    title: req.body.title,
    imgCollection:  req.files['file'],
    poster: req.files['file3']
  };

  Movie.create(movieData)
    .then(movie => res.json({ msg: 'Movie added successfully' }))
    .catch(err => res.status(400).json({ error: 'Unable to add this movie' }));
});

控制台日志的图像

console log upload.js

Answer 1

您要登录的是FilePond文件项，它不是File对象。该文件项具有一个file属性，其中包含实际的文件对象，如果您记录的数组是要发布到服务器的内容，则需要对其进行映射，以便它包含文件对象而不是FilePond文件项。

Answer 2

您不应在标头中传递任何Content-type。

从文件中获取文件属性，同时进行如下附加操作

formData.append("file", files.file);

multer / filepond上传返回未定义

2 个答案: