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

2024-02-10

请帮助实现 dropzone.js 将文件上传到 Amazon s3 服务器。已经参考了以下链接https://github.com/enyo/dropzone/issues/33 https://github.com/enyo/dropzone/issues/33,但是,没有想法实施。请帮助实施同样的措施。需要任何 dropzone 配置代码。


对于可能也提出这个问题的人,我想分享我的工作场景(使用 AWS Lambda 无服务器)。

Note:完整的例子可以在我的Vue S3 Dropzone 组件 https://github.com/kfei/vue-s3-dropzone/blob/master/frontend/src/components/Dropzone.vue,与 Dropzone 和 S3 相关的代码实际上与框架无关。

所以,基本上,

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

Hints:

  • 当我签署一份PUT可上传的网址,我要去hijack https://github.com/kfei/vue-s3-dropzone/blob/e348188/frontend/src/components/Dropzone.vue#L30-L37 the 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 })
        }
    })
}

Demo

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何实现 dropzone.js 将文件上传到 Amazon s3 服务器? 的相关文章

随机推荐

  • 如何在 iPad 版 Safari 中使用 jQuery 识别触摸事件?是否可以?

    是否可以使用 jQuery 识别 iPad Safari 浏览器上的触摸事件 我在 Web 应用程序中使用了 mouseOver 和 mouseOut 事件 由于没有 mouseOut 和 mouseMove 等事件 iPad 的 Safa
  • Django 无法从 django.contrib.auth.views 导入登录信息

    我尝试为我的页面构建登录功能 要按如下方式编辑 urls py 它会不断打印 无法从 django contrib auth views 导入名称 login 我该如何处理这个问题 from django contrib auth view
  • C++:0.和0.0之间的区别?

    我很清楚之间的区别0 and 0 0 整数和双精度 但这之间有什么区别吗0 and 0 0 请注意 预先非常感谢 Axel 没有区别 两个文字都是双精度的 来自 C 语法 fractional constant digit sequence
  • 使用 JavaScript 动态伪元素 CSS

    是否可以动态设置伪元素的CSS 例如 jQuery 动态样式帮助容器 help css width windowWidth xOffset height windowHeight yOffset bottom windowHeight le
  • LINQ - 对特定类型的类进行分组

    这个问题类似于LINQ 将一种类型的项目分组 https stackoverflow com questions 2835192 linq group one type of item但以更通用的方式处理 我有一个包含各种派生类的列表 我可
  • 使用 Flask 为使用 create-react-app 创建的前端提供服务

    我有一个带有 API 路由的 Flask 后端 由使用 create react app 创建的 React 单页应用程序访问 当使用 create react app 开发服务器时 我的 Flask 后端可以工作 我想为构建的服务 使用n
  • 如何在正则表达式中处理 \^$.?*|+()[{ 等特殊字符?

    我想匹配一个正则表达式特殊字符 http www regular expressions info characters html 我试过 x lt a b grepl x Error invalid regular expression
  • 使用selenium解决验证码问题

    我下面的代码是不断解决不同的验证码 请纠正我的错误 因为我不知道是什么原因造成的 from selenium import webdriver from python3 anticaptcha import ImageToTextTask
  • 通过单击按钮动态地将文本框添加到表单中

    我是一名 php 程序员 我有一个用户输入表单 其中一个人应该能够通过单击按钮添加任意数量的文本框 以输入多个电子邮件 ID 例如 他单击按钮第一次添加了一个附加文本框 他第二次单击该按钮 添加了另一个文本框 等等 您可以通过以下方式创建元
  • Java正则表达式匹配带有撇号的单词

    我有一句话 不 没关系 滞后 我试图检测 无滞后 模式 我的正则表达式是no s w s 1 3 lag 这失败了 但是 如果我的句子是 no it all right lag 请注意 它的单词没有撇号 则匹配成功 谁能建议我如何忽略窗口中
  • 分割字符串并保留分隔符

    我正在编写一个 chrome 扩展 我需要拆分一个仅包含文本和 img 标签的字符串 以便数组的每个元素都是字母或 img 标签 例如 a b c
  • Android-如何在文本视图上显示文本选择?

    我正在实现一个 epub 阅读应用程序 其中使用 textview 来显示 epub 文本 我想当用户长按文本视图时从文本视图中选择文本 然后对文本视图的选定文本执行多种操作 例如突出显示等 那么 我如何向用户显示这些光标来选择用户想要的文
  • 天文台重置

    我正在尝试完全重新启动 Chronometer 但它不起作用 相反 它正在暂停 基本上我想做的是在计时器计数到 10 时做一些事情 完成后我们提示用户重试 在这种情况下 我们希望从 1 秒重新计数到 10 秒 但计时器从暂停时间开始 而不是
  • Emscripten 绑定:如何从 Javascript 创建可访问的 C/C++ 数组?

    我在用box2d https github com kripken box2d js 并尝试创建一个链条形状 为了创建链形状或多边形形状 我必须传递向量数组才能指定几何形状 我没有看到任何文档可以帮助我完成此任务 也没有看到有关绑定的注释h
  • ASP.NET - Server.HtmlEncode 将哪些字符编码为命名字符实体

    Server HtmlEncode 将哪些字符编码为命名字符实体 到目前为止我只发现 lt gt amp and quot 肯定还有更多的事情吗 这是代码HtmlEncode 所以在这里您可以看到他们是如何做到的 public static
  • C“for”循环中的多个条件

    我遇到了这段代码 我通常使用 或 将多个条件分开for循环 但此代码使用逗号来执行此操作 令人惊讶的是 如果我改变条件的顺序 输出就会改变 include
  • freemarker跳过assertNotNull InvalidReferenceException

    我使用 freemarker 渲染对象列表 ul lt list publication as item gt li b item key b item value li ul 但有些项目的 item value null 会引发异常 fr
  • Runbook 测试窗格不显示写入输出

    我对自动化是全新的 对 Powershell 也很陌生 所以我希望这是一个简单的修复 我正在尝试让一些代码运行 据我所知 它确实运行了 但测试窗格没有显示任何内容 基于此线程 Azure powershell Runbook 不显示任何输出
  • 从 ionic 应用程序调用本机 Android 应用程序

    我正在开发一个将由 Android 本机应用程序调用的应用程序 我还得给他们打电话 为此我发现这个插件 https github com EddyVerbruggen Custom URL scheme 他们将按照以下代码调用我的应用程序
  • 如何实现 dropzone.js 将文件上传到 Amazon s3 服务器?

    请帮助实现 dropzone js 将文件上传到 Amazon s3 服务器 已经参考了以下链接https github com enyo dropzone issues 33 https github com enyo dropzone