2011-07-30 44 views
9

我嘗試實現一個簡單的XHR上傳到Node.js(通過Formidable)。問題是,如果我設置Node.js - 使用XHR強大的上傳

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

節點給我的錯誤:如果我設置的邊界只是一個隨機字符串沒有任何反應

Error: bad content-type header, no multipart boundary 

。瀏覽器掛在POST上並等待服務器響應。

問題是,如果我使用強大的常規同步POST一切正常。

任何人試圖使用Formidable與XHR上傳?

回答

13

我想通了。我在客戶端犯了一個小錯誤。

下面是XHR上傳與厲害

工作expample您不需要設置任何邊界或特殊標頭。

客戶

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

我收到錯誤「錯誤的內容類型標題,沒有內容類型」。不確定如何避免這種情況? – wilsonpage

+0

@pagewil嘗試在您的

標記上設置enctype =「multipart/form-data」 – Pono

+0

您能分享客戶端上實際存在的問題嗎? – Alexander

2

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

希望這會有所幫助。

+1

我能得到它的使用接受一個艱鉅的XHR上傳。 – Tareq