Как я могу загрузить файл с React на сервер Express? - PullRequest
Новая
       6

Как я могу загрузить файл с React на сервер Express?

0 голосов
/ 11 апреля 2020

У меня возникли некоторые проблемы с загрузкой файлов с реакции на серверную часть, не могли бы вы показать мне, как это должно быть сделано правильно?

Ниже, я пытаюсь объяснить идею, что я пытаюсь do ...

Вот как выглядит интерфейс : 

uploadFile(e) {
  let file = e.target.files[0];
  axios.post("/uploadFileAPI", file);
}

<input type="file" onChange={this.uploadFile()} />

Вот бэкэнд : 

router.post("/uploadFileAPI", (req, res) => {
  console.log(req.body.file); //Just need to console log fetched files here or it's path maybe
});

Надеюсь, вы поняли, что я пытаюсь сделать. Не могли бы вы показать мне пример того, как это должно быть правильно реализовано? Спасибо

Ответы [ 2 ]

1 голос
/ 11 апреля 2020

сделайте следующие изменения: 

<input type="file" onChange={this.uploadFile} />

import axios from 'axios';
uploadFile(event){
  const data = new FormData() ;
  data.append('file', event.target.files[0]);
  axios.post("${apiUrl}/uploadFileAPI", data)
      .then(res => { // then print response status
        console.log(res.statusText)
      })
}

api side 

const multer = require('multer');
const storage = multer.diskStorage({
    destination: (req, file, callBack) => {
        callBack(null, 'uploads')
    },
    filename: (req, file, callBack) => {
        callBack(null, `${file.originalname}`)
    }
  })
let upload = multer({ dest: 'uploads/' })
server.post('/uploadFileAPI', upload.single('file'), (req, res, next) => {
    const file = req.file;
    console.log(file.filename);
    if (!file) {
      const error = new Error('No File')
      error.httpStatusCode = 400
      return next(error)
    }
      res.send(file);
  })

, чтобы узнать об этом, обратитесь https://www.youtube.com/watch?v=-Hvmj8yXfyU

1 голос
/ 11 апреля 2020

Вы вызываете функцию в onChange. Вместо этого вам нужно передать ссылку на функцию. 

<input type="file" onChange={this.uploadFile} /> // remove the parenthesis i.e. ()

РЕДАКТИРОВАТЬ на основе комментария:

Для получения файла в бэкэнде вы можете использовать библиотеки типа multer или express -fileupload . Малтер является популярным выбором. В Интернете доступно множество ресурсов, которые помогут вам как с точки зрения внешнего, так и внутреннего интерфейса. См. Их, например:

...