nodejs formidable不触发任何事件

Question

我用的是express3.x，使用的是formidable

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

没有任何事件能让triggered...Not确定我错过了什么..

Answer 1

如果您使用app.use(express.bodyParser())，则相当于：

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

你可以移除app.use(express.multipart());，然后就可以使用formidable了。

Answer 2

express在内部使用formidable，因此您的formidable不会获得任何事件，如果您想要自己使用formidable，则必须从bodyParser中删除multipart/form-data

我仍然使用express 2.x，但在3.x上也应该可以，在您的app.configure函数中尝试

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

现在你可以自己使用formidable了。

Answer 3

你使用formidable而不是内置bodyParser有什么特别的原因吗？它使用multipart中间件，并基于formidable。因此，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以了解更多事件。