NodeJS & express загрузка файла с XMLHttpRequest - не работает - PullRequest
Новая
       27

NodeJS & express загрузка файла с XMLHttpRequest - не работает

0 голосов
/ 07 февраля 2020

Я загружаю файл, используя эту форму, и к тому времени, когда xhr отправляет его, сервер не распознает req.xhr === true, так как я не могу обработать файл загружен. Что мне не хватает? 

<form  encType="multipart/form-data" method="post">
    <Button onClick={(event)=>startUploadFile(event)} type="button">Upload</Button>
    <input type="file" name="file"  id="file" multiple="multiple" onChange={onChangeHandler} />
</form>

Клиентская сторона 

const [upFile, setUpFile] = useState('')

const onChangeHandler = event => {
    setUpFile(event.target.files[0]);
}

const startUploadFile = e => {
        setSpin('visible')
        setMsg(`Uploading Media ...`)
        e.preventDefault()

        const data = new FormData()
        data.append('file', upFile)

        var formData = new FormData();
        var xhr = new XMLHttpRequest();

        var onProgress = function(e) {
          if (e.lengthComputable) {
            var percentComplete = (e.loaded/e.total)*100;
            console.log('percentage = ' + percentComplete) 
          }
        };

        formData.append('files', upFile); // this is a state object set onChange
        xhr.open('post', '/upload', true);
        xhr.addEventListener('error', onError, false);
        xhr.addEventListener('progress', onProgress, false);
        xhr.send(formData);
        xhr.addEventListener('readystatechange', onReady, false);

    }

Серверная сторона 

const express        = require('express'),
      app            = express.Router(),
      cors           = require('cors'),
      fs             = require('fs-extra');

app.use(cors())

app.post('/uploadFile', (req, res) => {

     if (req.xhr || req.headers.accept.indexOf('json') > -1) {
        // not accepted (req.xhr is false always) why?
     }
});

Ответы [ 2 ]

1 голос
/ 07 февраля 2020

В expressjs вам нужно установить пакет multer или грозный пакет для загрузки файла из клиентского приложения, после чего вы получите свой файл в объекте req.files.

0 голосов
/ 07 февраля 2020

Спасибо @Nikas за замечания - вот рабочее решение, если кому-то это нужно или что-то в этом роде. На стороне клиента: 

const startUploadFile = e => {
        setSpin('visible')
        setMsg(`Uploading Media ...`)
        e.preventDefault()

        const data = new FormData()
        data.append('file', upFile)

        var formData = new FormData();
        var xhr = new XMLHttpRequest();

        var onProgress = function(e) {
            if (e.lengthComputable) {
              var percentComplete = (e.loaded/e.total)*100;
              console.log('% uploaded:' + percentComplete)
            }
          };

          var onReady = function(e) {
           console.log('ready')
          };

          var onError = function(err) {
            console.log('something went wrong with upload');
          };

        formData.append('files', upFile); // this is a state object set onChange
        xhr.open('post', '/media/uploadFile', true);
        xhr.addEventListener('error', onError, false);
        xhr.addEventListener('progress', onProgress, false);
        xhr.send(formData);
        xhr.addEventListener('readystatechange', onReady, false);

    }

на стороне сервера: 

const express       = require('express'),
      app            = express.Router(),
      cors           = require('cors'),
      fs             = require('fs-extra'),
      formidable     = require('formidable');

app.post('/uploadFile',  (req, res) => {

     const path = './client/public/upload/';

     var form = new formidable.IncomingForm();
     form.uploadDir = path;
     form.encoding = 'binary';

     form.parse(req, function(err, fields, files) {
          if (err) {
               console.log(err);
               res.send('upload failed')
          } else {
               var oldpath = files.files.path;
               var newpath = path + files.files.name;
               fs.rename(oldpath, newpath, function (err) {
                    if (err) throw err;
                    res.send('complete').end();
               });
          }
     });
})
...