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

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

解决方法

对于可能也会跳到这个问题的人,我想分享我的工作场景(无服务器与AWS Lambda).

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

基本上,

>客户端(浏览器)调用AWS Lambda函数以获取要添加的每个文件的预签名上载URL.
>当响应中返回预签名URL时,客户端将立即触发dropzone.processFile.
>当正在处理文件时,相应地更改文件的dropzone.options.url.

提示：

>当我正在签署一个PUT上传URL时,我将使用xhr.send函数hijack,否则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 })
        }
    })
}

演示

原文地址：https://www.jb51.cc/js/150985.html