多文件上传中的 OnSubmit 和 OnChange

Posted 2023-03-11

【中文标题】多文件上传中的 OnSubmit 和 OnChange

【英文标题】：OnSubmit and OnChange in multer file upload

【发布时间】：2020-03-25 16:44:01

【问题描述】：

我想通过一个操作上传两个对象（文件和文字）。 这是定义的状态、toggle、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

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

标题

当我摆脱路由方法中的所有 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 函数。我真的很想用这些功能来做。 如何实现？

【问题讨论】：

您能找到解决方案吗？

是的，很久以前。我会写在答案中。

【参考方案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]));