我想将上传的文件编码到base64,以便将它们传递给请求.问题是,我正在使用Angular 2和Typescript,但我找不到任何关于如何做到这一点的信息.我发现在Javascript中可以用canvas完成,但我不知道如何用Typescript实现代码.

<input type="file" class="form-control" accept="image/*" multiple
    [(ngModel)]="spot.images" name="images">

推荐答案

所以我找到了解决办法:

compontent.ts

changeListener($event) : void {
  this.readThis($event.target);
}

readThis(inputValue: any): void {
  var file:File = inputValue.files[0];
  var myReader:FileReader = new FileReader();

  myReader.onloadend = (e) => {
    this.image = myReader.result;
  }
  myReader.readAsDataURL(file);
}

component.html

<input type="file" accept="image/*" (change)="changeListener($event)">

Typescript相关问答推荐

为什么缩小封闭内部不适用于属性对象,但适用于声明的变量?

如何使类型只能有来自另一个类型的键,但键可以有一个新值,新键应该抛出一个错误

防止获取发出不需要的请求

SortKey类型不起作用,尽管它使用的单个类型工作正常<>'

TypeScript:在作为参数传递给另一个函数的记录中对函数的参数实现类型约束

具有泛型类方法的类方法修饰符

如何编写一个类型脚本函数,将一个对象映射(转换)为另一个对象并推断返回类型?

如何重构长联合类型?

我可以以这样一种方式键入对象,只允许它的键作为它的值吗?

在对象中将缺省值设置为空值

如何在react组件中使用doctype和html标签?

寻址对象中路径的泛型类型

如何将定义模型(在Vue 3.4中)用于输入以外的其他用途

带投掷的收窄类型

将接口映射到交叉口类型

当传递带有或不带有参数的函数作为组件props 时,我应该如何指定类型?

接口中可选嵌套属性的类型判断

为什么`map()`返回类型不能维护与输入相同数量的值?

如何按成员资格排除或 Select 元组?

是否有解释为什么默认情况下在泛型类型上访问的属性不是索引访问