NodeJS & 使用 XMLHttpRequest 快速上传文件 - 不工作答案

【问题标题】：NodeJS & express file upload with XMLHttpRequest - not workingNodeJS & 使用 XMLHttpRequest 快速上传文件 - 不工作
【发布时间】：2020-02-08 01:03:24
【问题描述】：

我正在使用此表单上传文件，当 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?
     }
});

【问题讨论】：

标签： node.js express file-upload xmlhttprequest

【解决方案1】：

在 expressjs 中，您需要安装 multer 或强大的软件包才能从客户端应用程序上传文件，然后您将在 req.files 对象中收到您的文件。

【讨论】：

感谢您引导我朝着正确的方向前进 - 我将发布完整的解决方案

【解决方案2】：

感谢@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();
               });
          }
     });
})

【讨论】：