javascript - multer / filepond上传返回未定义(multer/filepond upload returning undefined)

Question

i am currently trying to integrate multiple filepond components/instances into my react app, where the images are uploaded on button/form submit.

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

I have it more or less working with the code below, but i'm getting an undefined result when logging out the results in routes.js file, even though when I log out the state on submit in upload.js, i do get results.

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

I've tried logging out just req.files, it returns undefined, the method i've used below comes directly from multers documentation and this logs out - TypeError: Cannot read property '0' of undefined

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

Thanks

(谢谢)

upload.js

(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

(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' }));
});

image of console log

(控制台日志的图像)

console log upload.js

(控制台日志upload.js)

  ask by old_blueyes translate from so

Answer 1

等待大神答复