多文件上传中的 OnSubmit 和 OnChange

Question

我想通过一个操作上传两个对象（文件和文字）。 这是定义的状态、切换、onSubmit、onChangeFile 和 onChangeText 函数 (SliderModal.js)

const [modal, setModal] = useState(false);
  const [fileData, setFileData] = useState([]);
  const [slideData, setSlideData] = useState({
    caption: ''
  })


  const toggle = () => {
    setModal(!modal);
  };

  const onChangeFile = e => {
    setFileData(e.target.files[0]);
  };

  const onChangeText = e => {
    setSlideData({
      ...slideData,
      [e.target.name]: e.target.value
    });
  }

  const onSubmit = e => {
    e.preventDefault();

    const newFile = new FormData();
    newFile.append('file', fileData);

    const { caption } = slideData;

    const newSlide = {
      caption
    }

    // Add file via addItem action
    addFile(newSlide);
    addFile(newFile);

    // Close modal
    toggle();
  }

和我的路线发布方法（files.js）：

router.post('/', upload.single('file'), (req, res) => {

  const newFile = new File({
    fileID: req.file.id,
    src: 'api/files/image/' + req.file.filename,
    altText: 'No image',
    caption: req.body.caption
  })
  newFile.save()
});

当我尝试使用此功能发送此消息时，出现错误：

TypeError: Cannot read property 'id' of undefined
[0]     at router.post (/home/wiktor/CarouselProject/routes/api/files.js:76:22)
[0]     at Layer.handle [as handle_request] (/home/wiktor/CarouselProject/node_modules/express/lib/router/layer.js:95:5)
[0]     at next (/home/wiktor/CarouselProject/node_modules/express/lib/router/route.js:137:13)
[0]     at multerMiddleware (/home/wiktor/CarouselProject/node_modules/multer/lib/make-middleware.js:18:41)
[0]     at Layer.handle [as handle_request] (/home/wiktor/CarouselProject/node_modules/express/lib/router/layer.js:95:5)
[0]     at next (/home/wiktor/CarouselProject/node_modules/express/lib/router/route.js:137:13)
[0]     at Route.dispatch (/home/wiktor/CarouselProject/node_modules/express/lib/router/route.js:112:3)
[0]     at Layer.handle [as handle_request] (/home/wiktor/CarouselProject/node_modules/express/lib/router/layer.js:95:5)
[0]     at /home/wiktor/CarouselProject/node_modules/express/lib/router/index.js:281:22
[0]     at Function.process_params (/home/wiktor/CarouselProject/node_modules/express/lib/router/index.js:335:12)
[0]     at next (/home/wiktor/CarouselProject/node_modules/express/lib/router/index.js:275:10)
[0]     at Function.handle (/home/wiktor/CarouselProject/node_modules/express/lib/router/index.js:174:3)
[0]     at router (/home/wiktor/CarouselProject/node_modules/express/lib/router/index.js:47:12)
[0]     at Layer.handle [as handle_request] (/home/wiktor/CarouselProject/node_modules/express/lib/router/layer.js:95:5)
[0]     at trim_prefix (/home/wiktor/CarouselProject/node_modules/express/lib/router/index.js:317:13)
[0]     at /home/wiktor/CarouselProject/node_modules/express/lib/router/index.js:284:7

这个

[0] 在 router.post (/home/wiktor/CarouselProject/routes/api/files.js:76:22)

是此 POST 路由方法中的错误。 就在这里：

文件ID：req.file.id

当我摆脱这个时，我得到了等效错误，但这次是：

req.file.文件名

但是我得到了数据库中的所有数据，除了

标题

当我摆脱路由方法中的所有 req.file 属性时，我什至得到两个文件文字。 所以

addFile(newSlide) 没有用，但是我知道我应该用一个 addFile 来做，但我不知道怎么做。

目前只有一种方法有效。

   <form className="uploadForm" action="/api/files" method="post" enctype="multipart/form-data">
            <label className="control-label">Select File</label>
            <input name="caption" id="input-1" type="text" className="caption" />
            <input name="file" id="input-1" type="file" className="file" />
            <input type="submit" value="submit" />
   </form> ,

但它没有使用 onSubmit 和 onChange 函数。 我真的很想用这些功能来做。 如何实现？

Answer 1

您必须创建一个新的FormData()并附加所有部分。 答案如下：

 const onSubmit = e => {
    e.preventDefault();

    const newSlide = new FormData();
    newSlide.append('slide', imageData);

    const { header, caption } = slideData;
    newSlide.append('caption', caption);
    newSlide.append('header', header);

    addSlide(newSlide);

    setImageData(null);

    // Close modal
    toggle();
  }

最终，如果您有许多文本字段，您可以使用（在从imageData附加slide之后）：

 Object.keys(slideData).map( key => newSlide.append(key,slideData[key]));