如何实现dropzone.js将文件上传到Amazon s3服务器? [英] How to implement dropzone.js to upload file into Amazon s3 server?

问题描述

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

Please help to implement the dropzone.js to upload the file into Amazon s3 server. Already referred the following link https://github.com/enyo/dropzone/issues/33, but, no idea to implement. kindly help to implement the same. Any dropzone configuration code is required.

推荐答案

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

For someone who might also jumped into this question, I'd like to share my working scenario (serverlessly with AWS Lambda).

注意:完整的示例可以在我的

Note: A full example can be found in my Vue S3 Dropzone component, the code related to Dropzone and S3 are actually framework agnostic.

基本上，

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

1. The client (browser) calls an AWS Lambda function to get the pre-signed upload URL for each file being added.
2. When the pre-signed URL returned in response, the client will trigger dropzone.processFile immediately.
3. When the file being processing, change dropzone.options.url for the file accordingly.

提示:

• 当我签署一个 PUT 可以上传的网址时，我将转到

• As I'm signing a PUT upload-able URL, I'm going to hijack the xhr.send function, otherwise Dropzone will always send file within formData, which is bad for a PUT upload.

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

演示

这篇关于如何实现dropzone.js将文件上传到Amazon s3服务器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！