如何仅使用JavaScript将base64编码的图像数据上传到S3?

2023-12-30

我在 Heroku (cedar env) 上有一个 Rails 应用程序。它有一个页面,我使用它将画布数据渲染到图像中toDataURL()方法。我正在尝试使用 JavaScript 将返回的 base64 图像数据字符串直接上传到 s3 (绕过服务器端)。问题是,既然这不是一个文件,我如何将base64编码的数据直接上传到S3并将其保存为文件?


我找到了一种方法来做到这一点。经过大量搜索后,查看了不同的教程。

您必须将数据 URI 转换为 blob,然后使用 CORS 将该文件上传到 S3,如果您正在处理多个文件,我对每个文件都有单独的 XHR 请求。

我发现这个函数可以将您的数据 URI 转换为一个 blob,然后可以使用 CORS 直接将其上传到 S3 (将数据 URI 转换为 Blob https://stackoverflow.com/a/11954337/1055838)

function dataURItoBlob(dataURI) {
    var binary = atob(dataURI.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
}

这是一个关于直接上传到 S3 的精彩教程,您需要自定义代码以允许 blob 而不是文件。 http://www.ioncannon.net/programming/1539/direct-browser-uploading-amazon-s3-cors-fileapi-xhr2-and-signed-puts/

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

如何仅使用JavaScript将base64编码的图像数据上传到S3? 的相关文章

  • 如何测试 javascript 闭包内的函数

    这似乎是不可能的 也可能是 但我正在尝试更多的 TDD 但我总是在闭包方面碰壁 假设我有以下内容 function createSomething init function privateMethod param return init
  • 使用 useReducers 调度函数发送多个操作?

    使用时是否可以通过调度函数发送多个动作useReducer挂钩反应 我尝试向它传递一组操作 但这会引发未处理的运行时异常 明确地说 通常会有一个初始状态对象和一个减速器 如下所示 const initialState message1 nu
  • 使用模数按字母顺序对列表进行排序

    我在获取元素列表并按字母顺序对它们进行排序方面没有任何问题 但我很难理解如何使用模数来做到这一点 更新 这是按我的方式工作的代码 但是 我更喜欢下面提供的答案的可重用性 因此接受了该答案
  • jQuery AJAX 调用 Java 方法

    使用 jQuery AJAX 我们可以调用特定的 JAVA 方法 例如从 Action 类 该 Java 方法返回的数据将用于填充一些 HTML 代码 请告诉我是否可以使用 jQuery 轻松完成此操作 就像在 DWR 中一样 此外 对于
  • 使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

    I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li
  • 在 Wordpress 站点中进行 AJAX 调用时出现问题

    我在使用 Wordpress 站点功能的 AJAX 部分时遇到了一些问题 该功能接受在表单上输入的邮政编码 使用 PHP 函数来查找邮政编码是否引用特定位置并返回到该位置的永久链接 我的第一个问题是关于我构建的表单 现在我的表单操作是空白的
  • 除了更改标题之外,如何在 Firefox 中强制另存为对话框?

    有没有办法在 ff 中强制打开 www example com example pdf 的另存为对话框 我无法更改标题 如果您可以将文件以 Base64 格式输出到客户端 则可以使用 data uri 进行下载 location href
  • 标签获取 href 值

    我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • Amazon S3 - 每个子域有 1 个存储桶和一个文件夹?

    我需要创建一项服务 允许用户在自定义子域中发布静态页面 我从来没有这样做过 所以如果这个问题听起来有点太基本了 请原谅我 为此 我希望将所有这些静态文件托管在 Amazon S3 或 Google 云存储等中 以将其与我的服务器分开 使其可
  • Meteor - 从客户端取消服务器方法

    我正在通过服务器方法执行数据库计数 用户可以选择他们希望如何执行计数 然后调用该方法 我的问题是 计数可能需要一些时间 并且用户可能会在方法运行时改变主意并请求不同的计数 有什么方法可以取消调用的方法并运行新的计数吗 我认为 this un
  • Babel 7 Jest Core JS“TypeError:wks不是函数”

    将我的项目升级到 Babel 7 后 通过 Jest 运行测试会抛出以下错误 测试在 Babel 6 中运行没有任何问题 但在 Babel 7 中失败并出现以下错误 TypeError wks is not a function at Ob
  • 在 VPC 内从 Lambda 访问 AWS S3

    总的来说 我对在 VPC 中使用 AWS Lambda 感到非常困惑 问题是 Lambda 在尝试访问 S3 存储桶时超时 解决方案似乎是 VPC 端点 我已将 Lambda 函数添 加到 VPC 以便它可以访问 RDS 托管数据库 下面的
  • Angular 2+ 安全性;保护服务器上的延迟加载模块

    我有一个 Angular 2 应用程序 用户可以在其中输入个人数据 该数据在应用程序的另一部分进行分析 该部分仅适用于具有特定权限的人员 问题是我们不想让未经授权的人知道how我们正在分析这些数据 因此 如果他们能够在应用程序中查看模板 那
  • 为 illustrator 导出脚本以保存为 web jpg

    任何人都可以帮我为 illustrator CC2017 编写一个脚本 将文件以 JPG 格式导出到网络 旧版 然后保存文件并关闭 我有 700 个文件 每个文件有 2 个画板 单击 文件 gt 导出 gt 另存为 Web 旧版 然后右键文
  • HTML 离线应用程序缓存,列出下载的文件

    作为我正在构建的离线 Web 应用程序的加载屏幕的一部分 使用缓存清单 http developer apple com library safari documentation iPhone Conceptual SafariJSData
  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比
  • AFNetworking 2.0:收到 302 到 AWS S3 时 NSURLSessionDownloadTask 被取消

    我使用 README 文件 来自 AFNetworking 2 0 页面 中的一个简单示例来下载图像 对于直接从我的网络服务器提供的图像来说 一切正常 但对于位于 S3 上的网络服务器 Web 服务器会返回 302 重定向以下错误 Erro

随机推荐

  • 为什么类成员的名称不能与其嵌套类之一相同?

    或者为什么以下是不可能的 class Material class Keys Material Keys Keys get set Illegal 我没有看到任何可能的歧义 当被实例访问时 返回该属性 静态访问时 返回类 或者我错过了什么
  • 红宝石中的位敲击

    我想创建一个位 其中包含给定用户的安全权限 在 C 中 我会通过创建一个枚举来完成此操作 然后我会对二进制值进行一些操作 通过与 来查看它是否会产生 TRUE 值 我怎样才能在 Ruby 中做到最好 如果底层值很重要 那么您可以创建一个像枚
  • 作业:使用指针创建数组

    我有一个家庭作业问题正在解决 我和其他一些学生很确定我们的老师说错了 但也许没有 我已经检查了这里的一些问题 并且无法真正找到一种使用指针来创建本质上是数组的方法 说明如下 重写以下程序以使用指针而不是数组 代码是这样的 int main
  • macOS 文档图标模板? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 下面最初的问题已经被时间所取代 现在 您不再需要为文档提供图标或图标集 因为 macOS 将从您的应用
  • 如何使 WordPress 永久链接忽略自定义 url 重写

    我目前正在开发一个 WordPress 网站 该网站需要提供法语版本 当我添加查询字符串变量时 我找到了一种使主题与 fr FR po 和 mo 文件一起使用的方法l i e site tld将产生普通的英语网站 而site tld l f
  • .NET 4 无法安装,因为 SECUREREPAIR 无法 CreateContentHash 文件 SetupResources.dll:用于计算哈希错误:997

    我在 Windows 7 x64 计算机上安装任何 NET Framework 时遇到问题 我不断收到以下日志文 件 这可能是什么原因造成的 OS Version 6 1 7601 Platform 2 Service Pack 1 OS
  • 分支预测会使我的程序崩溃吗?

    浏览这本书的第 3 章 称为计算机系统架构 程序员的视角 https rads stackoverflow com amzn click com 0136108040 据说像这样的实现 testl eax eax cmovne eax ed
  • 为什么我无法删除代码中的中间变量?

    我目前正在使用扩展语法并遇到了一个意外的问题 下面的代码片段有效 如预期 并且不会引发任何错误 const arr 1 2 3 4 create array of numbers const copy arr make a shallow
  • 如何使用 ngRepeat 获取 angularFire 对象来 orderBy?

    我的 firebase 中当前的数据集如下所示 JZ7b name bob has slack JZ7a name connie has slack 如果我使用类似的东西 ul li li ul I get JZ7a康妮有松弛 JZ7b 鲍
  • Java:组件中 setPreferredSize() 和 setSize() 方法的区别

    之间的主要区别是什么setSize and setPreferredSize 有时我用setSize http docs oracle com javase 6 docs api java awt Component html setSiz
  • 删除 Python 注释/文档字符串的脚本

    是否有可用的 Python 脚本或工具可以从 Python 源代码中删除注释和文档字符串 它应该处理以下情况 aas def f m u x u y faake docstring if 1 string gt gt m if 2 stri
  • Howler.js 无法识别音频文件的 src 路径

    使用 HTML5 内置音频标签成功播放音频文件后 我尝试切换到使用嚎叫者 js反而 我已经验证 howler js 已正确安装 并且正在使用 console log 调用创建 播放我的歌曲的方法 但我很困惑为什么此处无法识别该路径 new
  • Spring数据JPA配置

    我最近正在使用 Spring Data JPA 开发一个 Spring Web 应用程序 我在持久性配置方面遇到问题 Configuration EnableTransactionManagement PropertySource reso
  • 在 asp.net 中获取机器的唯一信息

    所以我有一个获取IP地址的aspx 但如果我有多台来自同一个 IP 地址的机器 我需要一些信息来区分每台机器 你会用什么 这个问题有点模糊 但在大多数情况下 我认为 cookies 可以解决问题 尽管它们区分用户 浏览器和机器的组合 而不仅
  • Pandas 数据框 groupby 出现在两列中的文本值

    我的数据框如下所示 v1 v2 distance 0 be belong 0 666667 4 increase decrease 0 666667 9 analyze assay 0 666667 11 bespeak circulate
  • Python Dictionary.keys() 错误

    我正在尝试使用 keys 而不是获取像这样的键列表 过去总是有的 不过我明白了 b video 0 music 23 k b keys print k 0 gt gt gt TypeError dict keys object does n
  • 神经网络如何学习具有可变数量输入的函数? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 一个简单的例子 给定一个输入序列 我希望神经网络输出序列的中值 问题是 如果神经网络学会了计算 n 个输入的中值 那么它如何计算更多输入的
  • 我应该在 C++ 代码中使用 printf 吗?

    我一般用cout and cerr将文本写入控制台 然而有时我发现使用旧的更容易printf陈述 当我需要格式化输出时我会使用它 我将使用它的一个例子是 Lets assume that I m printing coordinates p
  • MySQL 根据前一行(同一列)更新列

    我有以下数据 ID Image 1 10 2 11 3 4 5 我想用之前行的值加一来更新缺失值 最终输出应该是 ID Image 1 10 2 11 3 12 4 13 5 14 更新的时候想过选择 但是不行 UPDATE items A
  • 如何仅使用JavaScript将base64编码的图像数据上传到S3?

    我在 Heroku cedar env 上有一个 Rails 应用程序 它有一个页面 我使用它将画布数据渲染到图像中toDataURL 方法 我正在尝试使用 JavaScript 将返回的 base64 图像数据字符串直接上传到 s3 绕过