Question

我似乎无法使用express，multer和react-dropzone将图像上传到我的uploads文件夹。我的代码如下：

<Dropzone
    style={{position: "relative"}}
    accept="image/*, video/*"
    onDrop={this.onDrop.bind(this)}
    onDragEnter={this.onDragEnter.bind(this)}
    onDragLeave={this.onDragLeave.bind(this)}
    name='avatar'
  >
    { dropzoneActive && <div style={overlayStyle}>Drop files...</div> }
    <div>

      <h2>Dropped files</h2>
      {

          files.map(f => <div><li>{f.name} - {f.size} bytes</li> 
          <img style={{height:'100px'}}src={f.preview}/></div>)
      }
    </div>
  </Dropzone>

使用dropzone示例上传基本文件。然后我的提交功能是：

createBlog(){

var file = this.state.files[0];
var file_name = file.name;
//api/blog
fetch('http://localhost:8080/saveBlog', {
method: 'POST',
headers: {
  "Accept": 'application/json',
  'Content-Type': 'application/json',
  //"Content-Type": "application/x-www-form-urlencoded"
},
body: JSON.stringify({
  file: file,
  file_name: file_name
})
  }).then((response) =>  {
  ...
  }))
  }, function(error) {
   console.log('error: ',error.message)
  })
}

注意文件会返回图片所具有的所有属性，E.G。 lastModifiedDate，name，preview，size，type，webkitRelativePath。

但是，当我将数据传递给服务器时，我得到的响应是：

{ file:
 { preview: 'blob:http://localhost:3000/954e0002-3045-44c4-bcd8-70dc26d0d416' 
},
file_name: 'image.jpg' } 'Body'
undefined 'files'

涉及图像的服务器代码是：

var multer = require('multer');
var upload = multer({ dest: './uploads/' });
...
...
router.post('/saveBlog', upload.single('avatar'), function(req, res, next) {
    console.log(req.body, 'Body');
    console.log(req.file, 'files');
    res.end();
});

我希望有人可以帮我告诉我为什么我的图片不会进入我的上传文件夹，因为我花了很长时间试图找出这个基本的例子。

Answer 1

您的问题是，您正在尝试将JSON.stringify()用于请求有效负载，而Multer期望并且仅与formData一起使用。您还需要删除标题或使用'content-type': 'multipart/form-data'

您有：

body: JSON.stringify({
  file: file,
  file_name: file_name
})

您需要改用formData（）：

createBlog(){

    const file = this.state.files[0];
    const file_name = file.name;
    let data = new FormData();
    data.append('file', file);
    data.append('file_name', file_name);

    fetch('http://localhost:8080/saveBlog', {
       method: 'POST',
       body: data
         }).then((response) =>  {
            ...
         }))
         }, function(error) {
          console.log('error: ',error.message)
    })
}

使用multer / react-dropzone上传图像

1 个答案: