web-dev-qa-db-ja.com

dropzone.jsを実装してファイルをAmazons3サーバーにアップロードするにはどうすればよいですか？

ドロップゾーン.jsを実装してファイルをAmazons3サーバーにアップロードするのを手伝ってください。すでに次のリンクを参照しています https://github.com/enyo/dropzone/issues/ ですが、実装する考えはありません。親切に同じことを実装するのを手伝ってください。ドロップゾーン構成コードが必要です。

javascriptamazon-web-servicesamazon-s3dropzone.js
12
kalidass srinivasan

この質問に飛び込んだかもしれない誰かのために、私は私の作業シナリオを共有したいと思います（AWS Lambdaとサーバーレスで）。

注：完全な例は私の Vue S3 Dropzoneコンポーネント にあります。DropzoneとS3に関連するコードは実際にはフレームワークです不可知論者。

だから基本的に、

  1. クライアント（ブラウザー）はAWS Lambda関数を呼び出して、追加される各ファイルの事前署名されたアップロードURLを取得します。
  2. 事前に署名されたURLが応答で返されると、クライアントはすぐにdropzone.processFileをトリガーします。
  3. ファイルを処理しているときに、それに応じてファイルのdropzone.options.urlを変更します。

ヒント：

  • [〜＃〜] put [〜＃〜]アップロード可能なURLに署名しているので、 ハイジャックxhr.send関数。それ以外の場合、Dropzoneは常にformData内でファイルを送信します。これは、PUTアップロードには適していません。

最終的なクライアントコード

// In the `accept` function we request a signed upload URL when a file being accepted
accept (file, done) {
  lambda.getSignedURL(file)
    .then((url) => {
      file.uploadURL = url
      done()
      // And process each file immediately
      setTimeout(() => dropzone.processFile(file))
    })
    .catch((err) => {
      done('Failed to get an S3 signed upload URL', err)
    })
}

// Set signed upload URL for each file being processing
dropzone.on('processing', (file) => {
  dropzone.options.url = file.uploadURL
})

最終的なAWSLambdaコード

var AWS = require('aws-sdk')
var s3 = new AWS.S3();
// Make sure you set this env variable correctly
var bucketName = process.env.AWS_BUCKET_NAME

exports.handler = (event, context) => {
    if (!event.hasOwnProperty('contentType')) {
        context.fail({ err: 'Missing contentType' })
    }

    if (!event.hasOwnProperty('filePath')) {
        context.fail({ err: 'Missing filePath' })
    }

    var params = {
        Bucket: bucketName,
        Key: event.filePath,
        Expires: 3600,
        ContentType: event.contentType
    }

    s3.getSignedUrl('putObject', params, (err, url) => {
        if (err) {
            context.fail({ err })
        } else {
            context.succeed({ url })
        }
    })
}

デモ

demo-gif

32
KF Lin