私はノードの初心者であり、進行状況バーと、アップロードが完了した後にすべての画像を同じページに動的にロードする各アップロード後のコールバックを持つ手ごわいを介して複数ファイルの画像アップロードを設定しようとしています。アップロードが開始された後、socket.io を使用してブラウザーと対話する必要があることを理解しています。手ごわいには、「進行状況」のイベントリスナーがあります。受信したバイトを受信してアップロード バーを作成するには、クライアント側のスクリプトが必要です。ファイルのアップロードが完了したら、socket.io で画像がアップロードされた場所の URL をクライアントに渡して、クライアントが画像を読み込んで DOM に動的に追加できるようにします。ここに私がこれまでに持っているコードがあります。
私の質問は、クライアントにブロードキャストできるように、「進行状況」のイベントリスナー内で socket.io コードをどのように構造化するかです。
私が話していることを示すためのいくつかの緩い疑似コードを次に示します。
//formidable code:
app.post('/new', function(req,res){
var form = new formidable.IncomingForm();
form.addListener('progress', function(bytesReceived, bytesExpected){
//Socket.io interaction here??
});
form.uploadDir = __dirname + '/public/images/';
form.on('file', function(field, file) {
//rename the incoming file to the file's name
fs.rename(file.path, form.uploadDir + "/" + file.name);
console.log(form.uploadDir + "/" + file.name);
})
});
//socket.io code
io.sockets.on('connection', function (socket) {
socket.on('upload', function (msg) {
socket.broadcast.emit('progress', bytesReceived);
});
});