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

Question

Я работаю над компонентом реагирования, где я хочу загрузить файл Excel на сервер. Вот что я пытаюсь Но он дает мне пустой объект, когда я консоль запроса тела

<input type="file" id="avatar" name="avatar" onChange={this.fileHandler.bind(this)} style={{"padding":"10px"}}/>

Вот метод обработчика файла, который будет выполняться при изменении входного файла:

fileHandler = (event) => {
        event.preventDefault();
        let fileObj = event.target.files[0];
        console.log(fileObj);
        //console.log(JSON.stringify(fileObj));

        var data = new FormData()
        data.append('file', fileObj)

        fetch("/upload", {
            method: 'POST',
            body: data
        }).then(function(response) {
            if (response.status >= 400) {
                throw new Error("Bad response from server");
            }
            return response.text();
        }).then(function(data) {
            console.log(data)
        }).catch(function(err) {
            console.log(err)
        });
}

Вот код сервера для загрузки файл.

app.post('/upload', function(req, res) {
        console.log(req.body); // Output : {} or undefined
        /*try {
            if(!req.files) {
                res.send({
                    status: false,
                    message: 'No file uploaded'
                });

            } else {
                let avatar = req.files.avatar;

                //Use the mv() method to place the file in upload directory (i.e. "uploads")
                avatar.mv('./uploads/' + avatar.name);

                //send response
                res.send({
                    status: true,
                    message: 'File is uploaded',
                    data: {
                        name: avatar.name,
                        mimetype: avatar.mimetype,
                        size: avatar.size
                    }
                });
            }
        } catch (err) {
            res.status(500).send(err);
        }*/
     })

Если я попробую ниже с помощью действия формы, это даст мне правильный вывод в req.files, но я не хочу перенаправлять.

<form id="myForm" method="post" encType="multipart/form-data" action="/upload">
  <input type="hidden" name="msgtype" value="2"/>
  <input type="file" id="avatar" name="avatar" onChange={this.fileHandler.bind(this)} style={{"padding":"10px"}}/>
  <input type="submit" value="Upload" />
</form>

Также я надеваю не хочу использовать ax ios, так как я использую тот же запрос на выборку для всех других исполнений. Любая помощь приветствуется.

Answer 1

Наконец, я могу работать с правильными параметрами запроса, используя fetch . Вот решение, которое я попробовал и которое работает как ожидалось:

<form id="myForm" method="post" encType="multipart/form-data" action="/upload" onSubmit={this.fileSubmit.bind(this)}>
  <input type="hidden" name="msgtype" value="2"/>
  <input type="file" id="avatar" name="avatar" onChange={this.fileHandler.bind(this)} style={{"padding":"10px"}}/>
  <input type="submit" value="Upload" />
</form>

, а вот обработчик отправки:

fileSubmit = (event) => {
  event.preventDefault();
  fetch(event.target.action, {
      method: 'POST',
      body: new FormData(event.target) // event.target is the form

  }).then((resp) => {
      return resp.json();
      //console.log(resp.json());

  }).then((body) => {
      // TODO handle body
      console.log(body);
      if(body.status) {
          alert(body.message);
      }
      else {
          alert("Please Select a file to upload");
      }
  }).catch((error) => {
      // TODO handle error
      //
  });

и на стороне сервера я могу получить req .files , а также req.body .

app.post('/upload', function(req, res) {
        console.log(req.body); // which gives me form data
        console.log(req.files); // which gives me file object
});

Answer 2

Я действительно не знаю, что я делаю неправильно с fetch, но я достиг загрузки файла, перенаправив действие формы невидимому. Здесь я могу предотвратить перенаправление формы.

<iframe name="dummyframe" id="dummyframe" style={{"display": "none"}}></iframe>
<form id="myForm" method="post" encType="multipart/form-data" action="/upload" target="dummyframe">
  <input type="hidden" name="msgtype" value="2"/>
  <input type="file" id="avatar" name="avatar" onChange={this.fileHandler.bind(this)} style={{"padding":"10px"}}/>
  <input type="submit" value="Upload" />
</form>

Таким образом, без получения я получаю объект файла на моей стороне сервера, как показано ниже:

app.post('/upload', function(req, res) {
        console.log(req.files); // Output : {avatar:{name:"", data: "", size:"", mimetype:""}}
})