Expressを使用してFirebase上でExpressファイルを使用してHTTPファイルをアップロードする方法

Question

ファイルをクラウド機能にアップロードしようとしていますが、Expressを使用してリクエストを処理していますが、

サーバーサイドJS

const express = require('express'); 
const cors = require('cors'); 
const fileUpload = require('express-fileupload'); 

const app = express(); 
app.use(fileUpload()); 
app.use(cors()); 

app.post('/upload', (req, res) => { 
    res.send('files: ' + Object.keys(req.files).join(', ')); 
}); 

クライアント側のjs

const formData = new FormData(); 
Array.from(this.$refs.fileSelect.files).forEach((file, index) => { 
    formData.append('sample' + index, file, 'sample'); 
}); 

axios.post(
    url, 
    formData, 
    { 
     headers: { 'Content-Type': 'multipart/form-data' }, 
    } 
); 

このまったく同じコードがクラウド機能、REQに展開する際の、改行ようだ：私はローカルで動作するバージョンを作成しました。ファイルは未定義です。誰が何が起こっているのか分かりませんか？

私はこれが私の空の配列（同じクライアント側コード）だ、ローカルでもうまく働いたmulterを使用しての外出を、持っていたが、一度クラウド機能にアップロード 編集：私は持っている

const app = express(); 
const upload = multer(); 
app.use(cors()); 

app.post('/upload', upload.any(), (req, res) => { 
    res.send(JSON.stringify(req.files)); 
}); 

Answer 1

を数日間同じ問題を抱えていたFirebaseチームは、ミドルウェアを使ってmultipart/form-dataの元の本体をreq.bodyに入れていたことが判明しました。 multerでリクエストを処理する前にconsole.log（req.body.toString（））を実行すると、データが表示されます。 multerが新しいreq.bodyオブジェクトを作成し、結果のreqを上書きすると、データはなくなり、取得できるのは空のreq.bodyだけです。うまくいけば、firebaseチームはすぐにこれを修正することができます。

Answer 2

実際この問題を引き起こしたクラウド機能のセットアップには大きな変化がありました。これは、HTTPS機能を提供するために使用されるすべてのExpressアプリケーション（デフォルトアプリケーションを含む）に適用されるミドルウェアの仕組みと関係しています。基本的には、クラウド関数はリクエストの本文を解析して、それをどう処理するかを決定し、ボディの生の内容をバッファに入れてreq.rawBodyにします。これを使用してマルチパートコンテンツを直接解析することはできますが、ミュータルなどのミドルウェアでは実行できません。

代わりに、busboyというモジュールを使用して、生の本文のコンテンツを直接処理できます。それはrawBodyバッファを受け入れることができ、見つかったファイルをあなたに戻します。アップロードされたすべてのコンテンツを繰り返し、ファイルとして保存してから削除するサンプルコードです。あなたは明らかにもっと便利なことをしたいと思うでしょう。

const path = require('path'); 
const os = require('os'); 
const fs = require('fs'); 
const Busboy = require('busboy'); 

exports.upload = functions.https.onRequest((req, res) => { 
    if (req.method === 'POST') { 
     const busboy = new Busboy({ headers: req.headers }); 
     // This object will accumulate all the uploaded files, keyed by their name 
     const uploads = {} 

     // This callback will be invoked for each file uploaded 
     busboy.on('file', (fieldname, file, filename, encoding, mimetype) => { 
      console.log(`File [${fieldname}] filename: ${filename}, encoding: ${encoding}, mimetype: ${mimetype}`); 
      // Note that os.tmpdir() is an in-memory file system, so should only 
      // be used for files small enough to fit in memory. 
      const filepath = path.join(os.tmpdir(), fieldname); 
      uploads[fieldname] = { file: filepath } 
      console.log(`Saving '${fieldname}' to ${filepath}`); 
      file.pipe(fs.createWriteStream(filepath)); 
     }); 

     // This callback will be invoked after all uploaded files are saved. 
     busboy.on('finish',() => { 
      for (const name in uploads) { 
       const upload = uploads[name]; 
       const file = upload.file; 
       res.write(`${file}\n`); 
       fs.unlinkSync(file); 
      } 
      res.end(); 
     }); 

     // The raw bytes of the upload will be in req.rawBody. Send it to busboy, and get 
     // a callback when it's finished. 
     busboy.end(req.rawBody); 
    } else { 
     // Client error - only support POST 
     res.status(405).end(); 
    } 
}) 

一時スペースに保存されたファイルはメモリを占有するため、そのサイズは合計10MBに制限されている必要があります。大容量のファイルの場合は、それらをCloud Storageにアップロードし、ストレージトリガーで処理してください。

クラウド機能によって追加されたデフォルトのミドルウェアは、現時点ではfirebase serve経由でローカルエミュレータに追加されていないことに注意してください。そのため、このサンプルは動作しません（rawBodyは使用できません）。

チームは、標準のExpressアプリケーションとは異なるHTTPS要求の間に何が起こったのかを明確にするために、ドキュメントを更新する作業を進めています。

Answer 3

公式クラウド機能チームの答えに追加するには、次の手順を実行して、ローカルにこの動作をエミュレートすることができますが（彼らは明らかに、掲載busboyコードよりも高く、このミドルウェアを追加）

const getRawBody = require('raw-body'); 
const contentType = require('content-type'); 

app.use(function(req, res, next){ 
    if(req.rawBody === undefined && req.method === 'POST' && req.headers['content-type'] !== undefined && req.headers['content-type'].startsWith('multipart/form-data')){ 
     getRawBody(req, { 
      length: req.headers['content-length'], 
      limit: '10mb', 
      encoding: contentType.parse(req).parameters.charset 
     }, function(err, string){ 
      if (err) return next(err); 
      req.rawBody = string; 
      next(); 
     }); 
    } 
    else{ 
     next(); 
    } 
}); 

Answer 4

私が結合することができましたブライアンとダグの両方の反応。ここで私のミドルウェアはmulterでreq.filesを模倣しているので、残りのコードには大きな変更はありません。

module.exports = (path, app) => { 
app.use(bodyParser.json()) 
app.use(bodyParser.urlencoded({ extended: true })) 
app.use((req, res, next) => { 
    if(req.rawBody === undefined && req.method === 'POST' && req.headers['content-type'].startsWith('multipart/form-data')){ 
     getRawBody(req, { 
      length: req.headers['content-length'], 
      limit: '10mb', 
      encoding: contentType.parse(req).parameters.charset 
     }, function(err, string){ 
      if (err) return next(err) 
      req.rawBody = string 
      next() 
     }) 
    } else { 
     next() 
    } 
}) 

app.use((req, res, next) => { 
    if (req.method === 'POST' && req.headers['content-type'].startsWith('multipart/form-data')) { 
     const busboy = new Busboy({ headers: req.headers }) 
     let fileBuffer = new Buffer('') 
     req.files = { 
      file: [] 
     } 

     busboy.on('field', (fieldname, value) => { 
      req.body[fieldname] = value 
     }) 

     busboy.on('file', (fieldname, file, filename, encoding, mimetype) => { 
      file.on('data', (data) => { 
       fileBuffer = Buffer.concat([fileBuffer, data]) 
      }) 

      file.on('end',() => { 
       const file_object = { 
        fieldname, 
        'originalname': filename, 
        encoding, 
        mimetype, 
        buffer: fileBuffer 
       } 

       req.files.file.push(file_object) 
      }) 
     }) 

     busboy.on('finish',() => { 
      next() 
     }) 


     busboy.end(req.rawBody) 
     req.pipe(busboy) 
    } else { 
     next() 
    } 
})} 

Answer 5

G. Rodriguezさんの回答が修正されました。私はBusboyのために 'field'と 'finish'イベントを追加し、 'finish'イベントではnext（）を行います。これは私の仕事です。

module.exports = (path, app) => { 
    app.use(bodyParser.json()) 
    app.use(bodyParser.urlencoded({ extended: true })) 
    app.use((req, res, next) => { 
     if(req.rawBody === undefined && req.method === 'POST' && req.headers['content-type'].startsWith('multipart/form-data')){ 
      getRawBody(req, { 
       length: req.headers['content-length'], 
       limit: '10mb', 
       encoding: contentType.parse(req).parameters.charset 
      }, function(err, string){ 
       if (err) return next(err) 
       req.rawBody = string 
       next() 
      }) 
     } else { 
      next() 
     } 
    }) 

    app.use((req, res, next) => { 
     if (req.method === 'POST' && req.headers['content-type'].startsWith('multipart/form-data')) { 
      const busboy = new Busboy({ headers: req.headers }) 
      let fileBuffer = new Buffer('') 
      req.files = { 
       file: [] 
      } 

      busboy.on('file', (fieldname, file, filename, encoding, mimetype) => { 
       file.on('data', (data) => { 
        fileBuffer = Buffer.concat([fileBuffer, data]) 
       }) 

       file.on('end',() => { 
        const file_object = { 
         fieldname, 
         'originalname': filename, 
         encoding, 
         mimetype, 
         buffer: fileBuffer 
        } 

        req.files.file.push(file_object) 
       }) 
      }) 

      busboy.on('field', function(fieldname, val, fieldnameTruncated, valTruncated) { 
       console.log('Field [' + fieldname + ']: value: ' + inspect(val)); 
      }); 

      busboy.on('finish', function() { 
       next() 
      }); 

      busboy.end(req.rawBody) 
      req.pipe(busboy); 
     } else { 
      next() 
     } 
    })} 

Answer 6

私はそれがGoogleのクラウド機能と連携し、この（github）

のためのNPMモジュールを構築しましたanswers aboveのおかげで、それをインストールします（npm install --save express-multipart-file-parser）と、このようにそれを使用します：次のように

const fileMiddleware = require('express-multipart-file-parser') 

... 
app.use(fileMiddleware) 
... 

app.post('/file', (req, res) => { 
    const { 
    fieldname, 
    filename, 
    encoding, 
    mimetype, 
    buffer, 
    } = req.files[0] 
    ... 
})