Загрузка изображения с помощью multer/react-dropzone

avatar
kcuhcx2
8 апреля 2018 в 01:39
2896
1
0

Кажется, я не могу загрузить изображение в папку для загрузки с помощью экспресс,мультера и зоны реагирования. Мой код выглядит следующим образом:

<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)
  })
}

Обратите внимание,, что file возвращает все свойства изображения, например: lastModifiedDate, имя, предварительный просмотр, размер, тип, 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();
});

Я надеюсь, что кто-нибудь может помочь мне объяснить, почему мои изображения не попадают в мою папку для загрузки, поскольку я потратил много времени, пытаясь понять этот простой пример.

Источник

Ответы (1)

avatar
CaseyC
18 июля 2018 в 20:09
2

Ваша проблема в том, что вы пытаетесь использовать 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)
    })
}