如何实现 dropzone.js 上传文件到 Amazon s3 服务器？

How to implement dropzone.js to upload file into Amazon s3 server?

请帮助实施 dropzone.js 将文件上传到 Amazon s3 服务器。已经参考了以下link https://github.com/enyo/dropzone/issues/33，但是，没有实现的想法。请帮助实施相同的。需要任何 dropzone 配置代码。

对于可能也跳进这个问题的人，我想分享我的工作场景（无服务器与 AWS Lambda）。

注意：完整示例可以在我的Vue S3 Dropzone component中找到，与 Dropzone 和 S3 相关的代码实际上与框架无关。

所以，基本上，

  1. 客户端（浏览器）调用 AWS Lambda 函数为每个添加的文件获取预签名上传 URL。
  2. 当预签名URL响应返回时，客户端会立即触发dropzone.processFile。
  3. 在处理文件时，相应地为文件更改dropzone.options.url。

提示：

  • 因为我要签署 PUT 可上传 URL，所以我要 hijack 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
})

最终的 AWS Lambda 代码

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

演示