在 Angular 中将图像转换为文件类型答案

【问题标题】：Convert Image as File Type in Angular在 Angular 中将图像转换为文件类型
【发布时间】：2019-10-12 12:47:48
【问题描述】：

我正在修改 angular typescript 中的方法 a，它使用文件类型的输入元素上传图像，并且方法中的事件正在传递。我必须修改一个方法，因为现在没有输入元素，并且我的 Angular 项目的资产文件夹中有一个图像文件。所以现在我不想篡改之前写的代码：

loadImages(event) {
const files = event.target.files;
if (this.CheckFileName(files[0].name) && this.CheckFileSize(files[0].size)) {
  let imageList = [];
  const fileList: Array<File> = Array.from(files);
  fileList.sort((a, b) => {
    if (a.name > b.name)
      return 1;
    if (b.name > a.name)
      return -1;
    return 0;
  })
}

现在我希望我的文件来自“../../assets/images/0001.png”。我怎样才能通过从给定路径读取我的图像文件并将其转换为类型文件来实现相同的目标。

【问题讨论】：

标签： javascript html angular typescript

【解决方案1】：

您可以使用获取图像然后将其转换为文件对象。

你需要返回一个 Observable 而不是直接返回值。

getImage() {
  return this.http
    .get("https://picsum.photos/id/34/200/300", {
      responseType: "arraybuffer"
   })
    .pipe(
      map(response => {
        return new File([response], "myImage.png");
      })
    );
}

您可以查看工作演示 here。

【讨论】：