web-dev-qa-db-ja.com

Firebase用クラウド機能（multer、busboy）でExpressを使用してHTTPファイルのアップロードを実行する方法

Expressを使用してそこでリクエストを処理し、Cloud Functionsにファイルをアップロードしようとしていますが、成功していません。ローカルで動作するバージョンを作成しました：

サーバーサイド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.filesが未定義のCloud Functionsにデプロイされたときに壊れているようです。ここで何が起こっているのか誰にも分かりますか？

[〜＃〜] edit [〜＃〜]multerを使用することもありましたが、これはローカルで正常に機能しましたが、Cloud Functionsにアップロードすると、空の配列になりました（同じクライアント側コード）：

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

app.post('/upload', upload.any(), (req, res) => {
    res.send(JSON.stringify(req.files));
});
javascriptfirebaseexpressgoogle-cloud-functions
23
Eindbaas

実際、この問題を引き起こしたCloud Functionsの設定に重大な変更がありました。 HTTPS機能を提供するために使用されるすべてのExpressアプリ（デフォルトアプリを含む）に適用されるミドルウェアの動作方法に関係しています。基本的に、Cloud Functionsはリクエストのボディを解析し、それをどう処理するかを決定し、ボディの生のコンテンツをreq.rawBodyのバッファに残します。これを使用して、マルチパートコンテンツを直接解析できますが、ミドルウェア（multerなど）では実行できません。

代わりに、 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にアップロードし、ストレージトリガーで処理する必要があります。

また、Cloud Functionsによって追加されたデフォルトのミドルウェアの選択は、現在firebase serveを介してローカルエミュレーターに追加されていないことに注意してください。そのため、この場合、このサンプルは機能しません（rawBodyは使用できません）。

チームはドキュメントの更新に取り組んでおり、標準のExpressアプリとは異なるHTTPSリクエスト中に何が起こるかについてより明確にしています。

34
Doug Stevenson

ブライアンとダグの両方の反応を組み合わせることができました。これが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()
    }
})}
12
G. Rodriguez

上記の回答 のおかげで、これのためにnpmモジュールを構築しました（- github ）

Googleクラウド機能で動作し、インストールするだけです（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]
  ...
})
10
Cristóvão Trevisan

私は数日間同じ問題に苦しんでいますが、firebaseチームはmultipart/form-dataの未加工のボディをミドルウェアでreq.bodyに入れていることがわかりました。 multerでリクエストを処理する前にconsole.log（req.body.toString（））を試すと、データが表示されます。 multerが結果のreqをオーバーライドする新しいreq.bodyオブジェクトを作成すると、データはなくなり、取得できるのは空のreq.bodyだけです。 Firebaseチームがこれをすぐに修正できることを願っています。

7
James Kuang

公式のCloud Functionチームの回答に追加するには、以下を実行することにより、この動作をローカルでエミュレートできます（明らかに、このミドルウェアを、彼らが投稿したバスボーイコードよりも上位に追加します）

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();
    }
});
5
Brian Rosamilia

G.ロドリゲスの反応のいくつかのバグを修正しました。 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()
        }
    })}
3
Shuangquan Wei

このスレッドに関する皆さんの助けに感謝します。考えられるすべての組み合わせとこれらのさまざまなライブラリをすべて試してみましたが、他のすべてのオプションを使い果たしてからこれを発見するためだけに1日を無駄にしました。

上記のソリューションのいくつかを組み合わせて、ここでTypeScriptとミドルウェア対応のスクリプトを作成します。

https://Gist.github.com/jasonbyrne/8dcd15701f686a4703a72f13e3f800c

3
Jason Byrne

サーバーでBusboyを使用してrawReqを解析することに加えて、Axiosリクエストに次の設定を追加する必要がある場合があることに注意してください。

{ headers: { 'content-type': `multipart/form-data; boundary=${formData._boundary}` }};

境界ではなくcontent-typeのみを指定すると、サーバーでBoundary not foundエラーが発生します。代わりに、ヘッダーを完全に削除すると、Busboyはフィールドを適切に解析しません。参照： Firebase Cloud FunctionsおよびBusboyはフィールドまたはファイルを解析しない

0
Bruno

Firebase関数を使用してアプリを展開したときに同じ問題が発生します。 multerを使用してAmazon s3に画像をアップロードしていました。上記のnpmを使用してこの問題を解決します https://stackoverflow.com/a/48648805/521379 Cristóvãoによって作成されました。

  const { mimetype, buffer, } = req.files[0]

  let s3bucket = new aws.S3({
     accessKeyId: functions.config().aws.access_key,
     secretAccessKey: functions.config().aws.secret_key,
  });

  const config = {
     Bucket: functions.config().aws.bucket_name,
     ContentType: mimetype,
     ACL: 'public-read',
     Key: Date.now().toString(),
     Body: buffer,    
   }

   s3bucket.upload(config, (err, data) => {
     if(err) console.log(err)

     req.file = data;
     next()
  })

これは、単一のファイル画像のアップロード用です。次のミドルウェアには、s3から返されたオブジェクトが含まれます

{ 
  ETag: '"cacd6d406f891e216f9946911a69aac5"',
  Location:'https://react-significant.s3.us-west1.amazonaws.com/posts/1567282665593',
  key: 'posts/1567282665593',
  Key: 'posts/1567282665593',
  Bucket: 'react-significant' 
}

この場合、dbにデータを保存する前にLocation URLが必要になる場合があります。

0
mrvncaragay