7

私はexpress3.xを使用しており、手ごわいものを使用しています

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

どのイベントもトリガーされません...何が足りないのかわかりません..

4

6 に答える 6

2

express は内部で formidable を使用しているため、 formidable はイベントを取得しません。自分で formidable を使用したい場合はmultipart/form-data、 bodyParserから削除する必要があります

私はまだexpress 2.xを使用していますが、app.configure関数で3.xでもうまくいくはずです

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

自分で手ごわいを使用できるようになりました。

于 2012-09-27T15:47:28.163 に答える
1

組み込みのbodyParserではなく、手ごわいものを使用している特定の理由はありますか? マルチパートミドルウェアを使用し、手ごわいに基づいています。したがって、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 仕様をご覧ください。

于 2012-09-26T11:27:31.980 に答える
1

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

https://gist.github.com/3813103

あなたはそれを実装することができます

var fileHandler = require('./middleware/fileHandler');
app.use(fileHandler());
于 2012-10-01T17:13:18.637 に答える