如何在Amazon S3服务器上使用dropzone.js上传文件？

Question

请帮忙将dropzone.js实现到Amazon S3服务器上传文件。已经查看了以下链接https://github.com/enyo/dropzone/issues/33，但是不知道如何实现，请帮忙实现。需要任何dropzone配置代码。

- kalidass srinivasan

Answer 1

对于可能也遇到这个问题的人，我想分享我的工作场景（使用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
})

最终的 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 })
        }
    })
}

演示

- KF Lin

---

这节省了我很多麻烦。谢谢！ - PureForm

你在代码中提到“header”必须针对每个文件进行更新，但是看起来你并没有这样做，那么这应该在哪里以及如何完成呢？ - moondaisy

你救了我的一天。明天赏金将授予给你，非常感谢。 - Hammerbot

@KF Lin - 我知道我正在回复一个非常老的线程，但我想确认你的解决方案是来自于Cognito之前还是之后。如果使用Cognito身份验证，我们是否仍然需要有一个生成签名URL的Lambda函数？ - Jimit Raithatha

@JimitRaithatha 我相信 Cognito 的有用之处在于生成签名时不需要“key”或文件名。 - dangel

对于刚接触 AWS 的用户，您如何设置 API Gateway 来运行 Lambda 函数？ - Scott