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

Question

请帮助实现 dropzone.js 以将文件上传到 Amazon s3 服务器。已经提到以下链接https://github.com/enyo/dropzone/issues/33 ，但是，不知道要实现。请帮助实现相同的。需要任何 dropzone 配置代码。

Answer 1

对于可能也跳进这个问题的人，我想分享我的工作场景(无服务器与 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 })
        }
    })
}

演示