角度将文件输入转换为 base64

2024-01-09

我正在尝试在我的 Angular 项目中解析输入到 Base64 的文件。

在我的模板中,我有:

<input type="file" (change)="handleUpload($event)">

然后我的功能是这样的:

handleUpload(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(event);
    reader.onload = () => {
        console.log(reader.result);
    };
}

这给了我这个错误:

ERROR TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
    at _global.(anonymous function).(anonymous function) [as readAsDataURL] (webpack-internal:///./node_modules/zone.js/dist/zone.js:1323:60)
    at AccountFormComponent.handleUpload (account-form.component.ts:212)
    at Object.eval [as handleEvent] (AccountFormComponent.html:344)
    at handleEvent (core.js:13547)
    at callWithDebugContext (core.js:15056)
    at Object.debugHandleEvent [as handleEvent] (core.js:14643)
    at dispatchEvent (core.js:9962)
    at eval (core.js:10587)
    at HTMLInputElement.eval (platform-browser.js:2628)
    at ZoneDelegate.invokeTask (zone.js:421)

您将事件传递给方法而不是文件。

你的方法应该是这样的:

handleUpload(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
        console.log(reader.result);
    };
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

角度将文件输入转换为 base64 的相关文章

  • 如何访问父组件上定义的 ViewChild 引用 - Angular 2

    我在应用程序模板 根组件的模板 中定义了一个微调器 加载器元素 例如 div div 在我的子组件中 我尝试使用访问它 ViewChild但这似乎总是返回未定义 我在子组件中访问它的代码是 ViewChild spinner read Vi
  • 具有内部表单初始值的 Angular ControlValueAccessor

    我有这个组件使用ControlValueAccessor 该组件有自己的内部表单 我找不到在哪里设置表单控件的初始值 有人能指出我正确的方向吗 import Component ChangeDetectorRef forwardRef Ng
  • 如何在 Angular 2 中处理 200 以外的 http 状态码

    现在我做http请求的方式 借用这个答案 https stackoverflow com a 34758630 4937981 这是 POST url data var headers new Headers authtoken local
  • 无法从角度路由器获取路径或 url

    我无法从 ActivatedRoute 或 Router 导入中获取 URL 或路径 它为路径 输出空白 为 URL 输出 我记得使用的是工作版本 唯一捕获正确路由的是Router events 我也无法订阅ActivatedRoute 中
  • 如何为 Angular 4、5 中的动态元素分配哈希 ID ref id

    如果我的问题很愚蠢 我很抱歉 我有 30 多个静态 ng container 和一些独特的静态 hashtagID 但我想在 ngFor 的帮助下动态创建它们 public lists food book cook 期望输出
  • 通过innerHTML输入时span不应用css样式

    我有 Angular 应用程序 作为它的一部分 我在 div 中显示查询结果 具有 JSONContainer 的 ID 我想突出显示结果中的特定查询 因此我使用了一个管道来搜索结果 并将文本中的 FIELD VALUE 替换为 span
  • Angular:DOM更新后调用方法

    我正在从 html 调用一个方法 调用休息服务 来增加 减少屏幕上的计数 现在我想调用另一个方法 即 getThreshold 来检查计数是否达到阈值 如果是 我想显示一条确认消息 我想首先更新屏幕上的计数 然后调用该函数来检查它是否达到阈
  • 如何避免 Angular 材料中出现额外的 mat-form-field-underline

    我在查找为什么在使用组件时会出现额外的 mat form field underline 时遇到问题 我的页面使用此标记
  • 从 Angular 2 动态表单的 API 设置值

    我正在尝试开始在 Angular 2 中创建动态表单 并且我正在使用 Angular 食谱中的设置here https angular io docs ts latest cookbook dynamic form html作为我的起点 我
  • Angular2 + Laravel 与实时和 WebSockets

    我构建了一个应用程序 并计划与 Angular 2 和 laravel 进行实时战斗 例如 你按下 攻击 按钮 你的对手就会实时看到他的生命在下降 我的应用程序构建有 前端 角2 Backend PHP Laravel 5 2 现在我正在寻
  • Angular 中的文件输入事件类型

    所以我已经使用 Angular 和 Typescript 很长时间了 我似乎无法找出输入文件的类型是什么 例如
  • 单击上一页的按钮路由到该页面后如何刷新页面

    我有 2 个页面 一个主页和一个页面 2 当我单击主页上的按钮时 它会路由到 page2 现在 单击主页上的按钮后 当我到达第 2 页时 它应该刷新 因为我的项目中存在一些缓存问题 我在ngoninit上添加了window location
  • 拖动元素时是否禁用 mousemove 事件?

    我试图通过在拖动元素时观察文档上的 mousemove 事件来移动元素 使用 html5 拖放 我在文档的父元素上添加了一个 mousemove 侦听器 每当我移动鼠标时都会触发该监听器 但是一旦我开始拖动另一个子元素 我就不再看到 mou
  • 使用 Observable 与 Immutable 进行变更检测

    所以我读了本文 http victorsavkin com post 110170125256 change detection in angular 2关于 Angular 2 变更检测 但读完之后我变得更加困惑 所以我开始阅读一些导致更
  • Angular 2 runOutsideAngular 仍然改变 UI

    从我的理解来看runOutsideAngular https angular io docs ts latest api core index NgZone class html runOutsideAngular anchor 如果我需要
  • Rxjs、fromEvent处理多个事件

    在 rxjs 5 1 中处理同一 DOM 节点上的多个事件的最佳方法是什么 fromEvent element event name 但我一次只能指定一个事件 我要手柄scroll wheel touchmove touchend even
  • 如何使用降级 Module() 引导应用程序与 ui-router 混合

    我正在使用 ui router 混合 https github com ui router angular hybrid https github com ui router angular hybrid 引导 经典 方式 我们在数据网格中
  • 在指令中动态添加 *ngIf

    如何动态地将 ngIf 添加到用属性指令修饰的元素 为了一个简单的实验 我尝试了这个 Directive selector lhUserHasRights export class UserHasRightsDirective implem
  • 聆听 Angular 2 中的元素可见性

    我正在为我的网络应用程序使用 Bootstrap 和 Angular 2 v4 我想监听指令中的元素以了解可见性变化 我的元素有一个可以隐藏其子元素的父元素hidden sm up我需要在每次隐藏或显示时触发一个函数 div hidden
  • Angular 模板验证表单

    我正在研究表单验证 我正在使用模板驱动的验证表单 其编码如下 现在工作正常 但是当我尝试添加时 username ngModel and password ngModel 在创建验证类的输入中 它向我显示一个错误 也请找到该错误 div c

随机推荐

  • 使用采样数据时CRC32函数如何工作?

    我想问你关于Python中以下短函数的解释 from zlib import crc32 def test set check identifier test ratio return crc32 np int64 identifier 0
  • Getline错误MFC vs2012(msvcp110.dll)

    我在使用 vs2012 中的 std getline 函数与 MFC 应用程序时遇到问题 同样的代码在vs2010中运行 这就是为什么我确信这不是代码本身的问题 void AddImage OnClickedIdbAiRegistratio
  • 具有自动完成功能的自定义交互式 Shell

    我的任务是创建一个嵌入到 python 中的交互式 shell 这样 当从命令行调用时 它将被放入该 shell 中 谁能给我推荐一个可以做到这一点的图书馆 我需要能够创建自定义单词 操作 以便当用户键入这些单词时 我的程序可以执行我创建的
  • 在 .js 文件中执行 PHP 代码

    我试图在 js 文件中执行一些 PHP 代码 但显然不知道如何正确执行 基本上 代码是向我的页面添加一些 HTML 标签 我将其用于滑出式联系表单 然而 联系表单本身是在 Wordpress 中通过短代码完成的 因此 我试图让短代码在使表单
  • 指定内容的构建操作 - Nuget

    告诉 Nuget 包将所有 css 文件添加为嵌入式资源 即构建操作是嵌入式资源 的最简单方法是什么 我试图通过工具文件夹中的 install ps1 来完成此操作 但仍然无法到达任何地方 注意 我正在从目录结构 tools content
  • switch case 编程练习

    enum SQLErrorCode OK 0 PARTIAL OK 1 SOMEWHAT OK 2 NOT OK 3 Code 1 int error getErrorCode if error SQLErrorCode PARTIAL O
  • 我可以通过 ssh 连接到 Windows,启动命令并让它在我注销时运行吗?

    现在 Windows 10 包含了 openSSH 服务器 是否有某种方法可以启动程序并让它在我注销时运行 在 Linux 上 有 screen 和 tmux 但是 Windows 上呢 Notes 能够重新附加到进程会很好 但这不是必需的
  • 当 list-marker 是伪元素时,list-style-position 不起作用。为什么?

    我想创建彩色列表标记 ul 我做到了 但现在在所有列表中list style position属性不起作用 这是代码 ul FirmStyle list style type none ul FirmStyle li before colo
  • asp.net正则表达式验证器客户端脚本错误

    我有以下正则表达式验证器来检测输入字符串是否包含 HTML 脚本标记 如果是则导致验证错误
  • Nodejs从哪里开始?

    我已经安装了nodejs并运行了几个简单的示例 例如在端口上打开服务器并侦听该端口 但是 我仍然无法将nodejs与web开发联系起来 所以为了学习和实现nodejs 我正在考虑使用rails和nodejs制作井字游戏 这可能吗 我正在设想
  • jQuery 可拖动自定义对齐网格

    我在项目中使用 jQuery UI Draggable 我有一个复选框可以切换可拖动对象上的网格 10x10 网格 选项 但是 当网格重新打开时 网格关闭时移动的对象不会与网格关闭时未移动的对象对齐 简而言之 这些对象位于不对齐的单独网格上
  • 自定义错误页面 .Net Core Web 应用程序未显示 500 错误

    我在生产中创建了一个自定义错误页面 它将要求用户更正 HTTP 状态代码页面 而不是显示丑陋的开发人员错误页面 我现在的代码如下 启动 cs public void Configure IApplicationBuilder app IHo
  • Bookshelf.js - 如何保存多对多关系?

    我在以 多对多 关系保存数据时遇到问题 这是我的模型 var CoursePeople bookshelf Model extend tableName course people var Course bookshelf Model ex
  • python subprocess - 分离进程

    我有一个 python 脚本af audit run py 它调用另一个Python脚本request audit py通过subprocess 第二个脚本request audit py在后台调用另一个子进程并返回请求 ID 问题出在第一
  • iPhone 4 Safari 上出现奇怪的水平空白

    在多个设备上测试我的网站的移动版本时 我注意到一个非常奇怪的行为 我有一个可滚动内容 divoverflow auto 并且这在所有测试的设备上都能正常工作 除了 Safari 上的 iPhone 4 其他浏览器和设备可以正确显示它 甚至
  • 如何在scapy中多次发送一个udp数据包?

    如何在scapy中多次发送一个udp数据包 我需要多次发送有效的 udp 数据包 scapy中有什么具体的方法或功能吗 干得好 sendp p iface eth0 inter 1 count x Where p是您的数据包或数据包列表 并
  • binascii.Error:无效的 base64 编码字符串:数据字符数 (1957) 不能多于 1 4 的倍数

    我试图将字符串解码为 base64 然后将其解压缩为 zlib 但出现以下消息 binascii Error 无效的 base64 编码字符串 数据数量 字符 1957 不能多于 4 的倍数 1 Code def decode token
  • 提取 URL 的一部分

    我需要提取hello world此网址的一部分 http example com tags hello world 我对拆分 替换和连接完全感到困惑 最好的方法是什么 我会这样做 var newString oldString replac
  • 使用 Find_All 函数返回意外结果集

    我正在使用 python 3 8 2 和 bs4 BeautifulSoup 我正在尝试查找标签的所有实例 并将每个实例都列在结果集中 每行一个 但是 返回的结果集包含的行数多于网站的原始抓取内容 这是因为结果集的第一行包含该标记的所有实例
  • 角度将文件输入转换为 base64

    我正在尝试在我的 Angular 项目中解析输入到 Base64 的文件 在我的模板中 我有