首页 文章

使用Multer将映像从React上传到Express服务器

提问于
浏览
0

当我尝试读 req.files 时,我得 undefined 如果我读 req.body ,我得 file: [object Object] ,在发送之前在前端读取时是 file: [object Object]

Icon: File(4076381) lastModified: 1513292207750 lastModifiedDate: Thu Dec 14 2017 17:56:47 GMT-0500 (EST) {} name: "image.jpeg" size: 4076381 type: "image/jpeg" webkitRelativePath: ""

但是之后

let upload =  new FormData();
upload.append('file', user);
console.log(upload);

上传日志 FormData = {} 所以我不知道为什么 .append() 无效 . user 是上面显示的Icon对象 .

但当发回时,它与服务器上的 [object Object] 相同 .

我试图理解为什么req.file不可读或任何其他替代方法如何读取上传的文件,以便我可以随心所欲地做任何事情(结束游戏,存储在数据库中作为mongodb中的字段,然后拉在登录后在客户端呈现并呈现) .

相关代码

Register.js

// standard React stuff

  handleUpload = (e) => {
    console.log(e.target.files[0]);
    this.setState({ Icon: e.target.files[0] });
  };


  handleSubmit = async (e) => {
    e.preventDefault();
    const dispatchObject = {
      Icon: this.state.Icon
    }
    await this.dispatchSubmit(dispatchObject);
  }

render(){
  return (
    <form noValidate autoComplete="off" onSubmit={this.handleSubmit}>
      />
      <Input
        id='Icon'
        type='file'
        name='Icon'
        accept='image/png, image/jpeg'
        onChange={this.handleUpload}
      />  
          <input type='submit' value='Submit'/>
    </form>
  )
}

动作/ index.js

export const register = (user, history) => {
  console.log(user);
  let upload =  new FormData();
  upload.append('file', user);
  return dispatch => {
    axios.post('http://localhost:9000/register', upload)
    .then((res) => {
      console.log(res.data);
      console.log('User successfully created');
    })
    .catch(err => console.log(err) );
  }
}

server.js

import multer from 'multer';

const storage = multer.diskStorage({
  destination: './files',
  filename(req, file, cb) {
    console.log(file);
    cb(null, `${new Date()}-${file.originalname}`);
  },
});

const upload = multer({ storage });

app.post('/register', upload.single('file'), async (req, res) => {
  console.log(req.body.file);
  res.json(req.body.file);
});

Multer将创建名为./file的相关文件夹,但其中没有任何内容,并且无法访问req.file . 我不能以标准的方式通过身体发送它,因为它以 [object Object] 格式出现 .

1 回答

  • 0

    解决方案太过于改变,以下是 user.Icon .

    export const register = (user, history) => {
      console.log(user);
      let upload =  new FormData();
      upload.append('file', user);
    

    还将我想要在另一个api调用中发送的任何其他文件分开 .

相关问题