2012-09-19 14 views
6

私はexpress3.xの午前の引き金と恐るべきnodejs任意のイベント

app.post "/up",(req,res)-> 
formidable = require('formidable') 
form = new formidable.IncomingForm() 
form.uploadDir = __dirname + "/uploads" 
form.encoding = 'binary' 


form.addListener 'file',(name,file) -> 
    #write file 
    console.log('file uploaded') 
    return 
console.log('$$$$$$$$$$$') 
form.addListener 'end', -> 
    console.log('end') 
    res.end() 
    return 
console.log('@@@@@$$$$') 
form.parse req,(err,fields,files)-> 
    console.log('parse') 
    console.log(err) if(err) 
    return 
console.log('######') 
return 

を使用してアップロードフォームは午前何

block content 
:coffeescript 
    $ -> 
     formData = new FormData() 
     xhr = new XMLHttpRequest() 
     onProgress = (e)-> 
      per_complete = (e.loaded/e.total) * 100 if e.lengthComputable 

     onReady = (e)-> 
      alert("Ready") 

     onError = (err)-> 
      alert("Error Loading "+err) 

     $('#upload').click (e)-> 
      formData.append('img',document.getElementById('img').files[0]) 
      xhr.open('post','/up',true) 
      xhr.addEventListener('error',onError,false) 
      xhr.addEventListener('progress',onProgress,false) 
      xhr.send(formData) 
      xhr.addEventListener('readystatechange',onReady,false) 

h1 hello world 
form 
    |select Image: 
    input(type='file',name='img', id='img') 
    input(type='button',value='button', id='upload') 

イベントのどれがトリガしないばかりしている...わからないではありません私は私の行方不明..

答えて

1

あなたはbodyParserに組み込まれていないかわいいを使用している特定の理由はありますか?それはmultipartミドルウェアを使用しており、恐ろしいことに基づいています。したがって、formidableのほとんどのオプションをbodyParserに適用することもできます。たとえば、次のように

app.use(connect.multipart({ uploadDir: path })); 

次のコードを試してみてください、あなたの質問に答えるために:

app.jsは

app.configure(function(){ 
    app.set('port', process.env.PORT || 3000); 
    app.set('views', __dirname + '/views'); 
    app.set('view engine', 'jade'); 
    app.use(express.favicon()); 
    app.use(express.logger('dev')); 
    app.use(express.bodyParser()); 
    app.use(express.methodOverride()); 
    app.use(app.router); 
    app.use(express.static(path.join(__dirname, 'public'))); 
}); 

app.post("/", function(req, res) { 
    console.log(req.files.img) 
    res.end() 
}) 

index.jade

form 
    input(type="file", name="img", id="img") 
    input(type="button", value="button", id="upload") 
script 
    var formdata = new FormData() 
    var xhr = new XMLHttpRequest() 

    $("#upload").on("click", function(e) {    
    xhr.upload.onprogress = function(evt) { 
     console.log("While sending and loading data.") 
     if (evt.lengthComputable) { 
     console.log (evt.loaded/evt.total * 100); 
     } 
    } 

    xhr.onloadend = function(evt) { 
     console.log("When the request has completed (either in success or failure).") 
    } 

    xhr.onload = function(evt) { 
     console.log("When the request has successfully completed.") 
    } 

    var image = document.getElementById('img').files[0] 
    formdata.append("img", image) 
    xhr.open("POST", "/", true) 
    xhr.send(formdata) 
    }) 

W3C Specificationsを見てくださいより多くのイベントのために。

2

Expressは、内部的に手ごわいを使用しているので、あなたの、あなたがbodyParserから

は私が急行2.xの上でまだ午前multipart/form-dataを削除する必要が自分で手ごわいを使用したい場合は、すべてのイベントを取得しません手ごわいですそれはまたあなたのapp.configure機能に

app.configure(function(){ 
    delete express.bodyParser.parse['multipart/form-data'] 
}) 

は今、自分で手ごわい使用することができますしようと、3.xの上のトリックを行う必要があります。

1

私のコントローラがそれを処理する前に完全にアップロードされたのと同じ問題がありました。イベントは解雇されましたが、私はまだ聞いていませんでした。 これに対抗するために、私はミドルウェアを作成してファイルアップロードをキャプチャし、コントローラが後でアクセスできるようにしておきました。

https://gist.github.com/3813103

あなたがapp.use(express.bodyParser()) を使用する場合は、

var fileHandler = require('./middleware/fileHandler'); 
app.use(fileHandler()); 
3

でそれを実装することができますに相当します。

app.use(express.json()); 
app.use(express.urlencoded()); 
app.use(express.multipart()); 

あなたはapp.use(express.multipart());、あなたは手ごわいオブジェクトを使用することができますを削除することができます。

関連する問題