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

发布于 2024-11-27 06:26:33 字数 538 浏览 0 评论 0原文

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

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

节点会给我错误：

Error: bad content-type header, no multipart boundary

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

关键是，如果我将 formidable 与常规同步 POST 一起使用，一切都会正常工作。

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

原文

I try to implement a simple XHR upload to Node.js (via Formidable). The problem is that if I set

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

node gives me error:

Error: bad content-type header, no multipart boundary

If I set boundary to just a random string nothing happens. The browser just hangs on POST and waits for server response.

The point is that if I use formidable with regular synchronous POST everything works fine.

Anyone tried to use Formidable with XHR upload?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

揪着可爱 2024-12-04 06:26:33

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

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

I figured it out. I made a small bug on the client side.

Here is the working expample of XHR upload with Formidable

You don't need to set any boundaries or special headers.

Client

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

Server

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

回复收藏 0 原文

慕巷 2024-12-04 06:26:33

我用 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);
    });

希望这有帮助。

I tried a couple of different things with Formidable and was never able to get it to accept a XHR upload. Here is what I ended up doing for a file upload using 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);
    });

Hope this helps.

回复收藏 0 原文

~没有更多了~