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.filename

但是我获得了数据库上的所有数据，除了

标题

当我除去route方法中的所有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();
  }

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

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

multer文件上传中的OnSubmit和OnChange

1 个答案: