Node.js - 强大的 XHR 上传

Posted 2023-02-27

【中文标题】Node.js - 强大的 XHR 上传

【英文标题】：Node.js - Formidable upload with XHR

【发布时间】：2011-10-16 14:19:16

【问题描述】：

我尝试实现一个简单的 XHR 上传到 Node.js（通过Formidable）。问题是，如果我设置

xhr.setRequestHeader("Content-Type", "multipart/form-data");

节点给我错误：

Error: bad content-type header, no multipart boundary

如果我将边界设置为随机字符串，则不会发生任何事情。浏览器只是挂在 POST 上并等待服务器响应。

关键是，如果我将强大的功能与常规同步 POST 一起使用，那么一切正常。

有人尝试使用Formidable 进行 XHR 上传吗？

【参考方案1】：

我用 Formidable 尝试了几种不同的方法，但始终无法让它接受 XHR 上传。这是我最终使用 express 上传文件所做的工作。

app.post('/upload', function (req,res)
  if(req.xhr)
    var fSize = req.header('x-file-size'),
    fType = req.header('x-file-type'), 
    basename = require('path').basename, 
    fName = basename(req.header('x-file-name')), 
    ws = fs.createWriteStream('./temp/'+fName); 
    req.on('data', function(data)  
      ws.write(data);
    );

希望这会有所帮助。

【参考方案2】：

我想通了。我在客户端做了一个小错误。

这是使用 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);

服务器

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);
    
  );
);

【讨论】：

我收到错误“错误的内容类型标头，没有内容类型”。不确定如何解决这个问题？

@pagewil 尝试在

您能分享一下客户端的实际问题是什么，解决了吗？

太棒了！它有助于。谢谢！你发现为什么不能指定header类型了吗？

@BrickYang 你不应该添加 Content-Type，因为如果你这样做，你应该包括像这样的边界分隔符“multipart/form-data;boundary=----WebKitFormBoundarydxvCgHrARZTMcsKt”，而你 *cannot* 实际上在 FormData 访问边界分隔符。 （而且我应该更仔细地阅读答案，因为我花了几个小时来了解发生了什么，而我的正确答案就在我眼前）