Hlow实现dropzone.js将文件上传到亚马逊s3服务器？

Question

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

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

演示