Node.js - 使用XHR进行强大的上传

Pon*_*ono 9 xmlhttprequest node.js

我尝试实现一个简单的XHR上传到Node.js(通过Formidable).问题是,如果我设置

xhr.setRequestHeader("Content-Type", "multipart/form-data");
Run Code Online (Sandbox Code Playgroud)

节点给我错误:

Error: bad content-type header, no multipart boundary
Run Code Online (Sandbox Code Playgroud)

如果我将边界设置为随机字符串没有任何反应.浏览器只挂起POST并等待服务器响应.

关键是如果我使用带有常规同步POST的强大功能,一切正常.

有人试图在XHR上传时使用Formidable吗?

Pon*_*ono 13

我想到了.我在客户端犯了一个小bug.

这是使用Formidable上传XHR工作示例

无需设置任何边界或特殊标头.

客户

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

var onProgress = function(e) {
  if (e.lengthComputable) {
    var percentComplete = (e.loaded/e.total)*100;
  }
};

var onReady = function(e) {
 // ready state
};

var onError = function(err) {
  // something went wrong with upload
};

formData.append('files', file);
xhr.open('post', '/up', true);
xhr.addEventListener('error', onError, false);
xhr.addEventListener('progress', onProgress, false);
xhr.send(formData);
xhr.addEventListener('readystatechange', onReady, false);
Run Code Online (Sandbox Code Playgroud)

服务器

app.post('/up', function(req, res) {
  var form = new formidable.IncomingForm();
  form.uploadDir = __dirname + '/tmp';
  form.encoding = 'binary';

  form.addListener('file', function(name, file) {
    // do something with uploaded file
  });

  form.addListener('end', function() {
    res.end();
  });

  form.parse(req, function(err, fields, files) {
    if (err) {
      console.log(err);
    }
  });
});
Run Code Online (Sandbox Code Playgroud)