Question

html的

  <input type='file' onchange="readURL(this);" />
  <img id="blah" src="http://placehold.it/180" alt="your image" />

的CSS

img{
  max-width:180px;
}
input[type=file]{
padding:10px;
background:#2d2d2d;}

的.js

 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                document.getElementById('blah').src=e.target.result
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

我有这段代码在上传之前显示图片预览。但是我正在使用angular 5，所以我有.ts文件而不是.js。如何在角度5中执行相同操作。我还想在所有浏览器中显示图像。请帮忙。提前谢谢。

Answer 1

html的

更新事件attr和处理程序参数以进行输入。你应该使用数据绑定src属性。如果src不为null或未定义或硬编码url（'http://placehold.it/180'），则以下将应用src

<input type='file' (change)="readURL($event);" />
<img id="blah" [src]="imageSrc || 'http://placehold.it/180'" alt="your image" />

.TS

在组件ts文件（类）中，您应该具有在视图（html）中使用的属性imageSrc，并且您的函数应该是该类的方法

...
imageSrc: string;
...
constructor(...) {...}
...
readURL(event: Event): void {
    if (event.target.files && event.target.files[0]) {
        const file = event.target.files[0];

        const reader = new FileReader();
        reader.onload = e => this.imageSrc = reader.result;

        reader.readAsDataURL(file);
    }
}

Answer 2

我正在使用以下代码来实现图像预览：

onFileChange(event: any) {
this.userFile = event.target.files[0];
this.imageSelected = this.userFile.name;
if (event.target.files && event.target.files[0]) {
  const reader = new FileReader();
  reader.onload = (e: any) => {
    this.imageSrc = e.target.result;
  };
  reader.readAsDataURL(event.target.files[0]);
}}

这可以正常工作并显示图像预览。我最初遇到的问题是，每次生成图像预览时，我都会在chrome开发人员工具中收到以下错误：

尽管一切正常，但没有其他错误。

如果我点击null：1，则会被引导至以下位置：

经过一些摆弄和故障排除之后，我能够找到我包含在下面的编辑中的解决方案。

编辑：找到答案。我没有||我的component.html的[src] =“中包含的'http://placehold.it/180'”。猜测其时间问题。现在排序。没有更多的错误。

Answer 3

请进行类似-> this.url = event.target.result;

的更改

readURL(event:any) {
    if (event.target.files && event.target.files[0]) {
        var reader = new FileReader();

        reader.onload = (event:any) = > {
            this.url = event.target.result;
        }

        reader.readAsDataURL(event.target.files[0]);
    }
}

Answer 4

您可能只需要将javascript function更改为typescript，如下所示。

readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = (e:any) => {
             (<HTMLImageElement>document.getElementById('blah')).src=e.target.result 
             //assuming element with id blah will always be an ImageElement
        };

        reader.readAsDataURL(input.files[0]);
    }
}

应该是它。

<强>更新

您还可以定义属性并将其绑定到图像src并相应地更改其值，如下所示：

在.ts之前的constructor文件中，将属性定义为url，并将其默认值设置为http://placehold.it/180。

url: string = 'http://placehold.it/180';

您可以在reader.onload内更新此属性，如下所示：

readURL(event:any) {
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();

    reader.onload = (event:any) => {
     this.url = event.target.result;
    }

    reader.readAsDataURL(event.target.files[0]);
  }
}

您的html现在如下所示：

<input type='file' (change)="readURL(this);" />
<img id="blah" [src]="url" alt="your image" />

Answer 5

我知道我来晚了，但是在图像和音频方面都遇到了这个问题。上面的解决方案对于图像来说效果很好，但是对于音频效果却不太好。最终，我通过使用URL对象而不是每个人都在使用的FileReader对象使所有工作正常。类似于以下内容

component.ts文件〜

imgSrc = 'assets/path/to/default/image.jpeg'

imgFileSelected(event: any) {
  if (event.target.files && event.target.files[0]) {
    this.imgSrc = URL.createObjectURL(event.target.files[0]);
  }
}

我的component.html看起来就像〜

<img [src]="imgSrc | sanitizeUrl"> <!-- using a Custom Pipe -->

最后，我创建了一个自定义管道来消除控制台的警告。我的烟斗如下〜

@Pipe({
  name: 'sanitizerUrl'
})
export class SanitizerUrlPipe implements PipeTransform {

  constructor (
    private sanitize: DomSanitizer
  ) {}

  transform(value: string): SafeUrl {
    return this.sanitize.bypassSecurityTrustUrl(value);
  }
}

要查看我如何将其用于音频标签，您可以check out this link.，这仅是多两行不言自明的代码。

Answer 6

在上传此代码之前预览所选图像将很容易。它仅预览图像，否则会给您错误该代码用于component.ts

  public imagePath;
 imgURL: any;
 public message: string;
 preview(files) {
 if (files.length === 0)
  return;
 var mimeType = files[0].type;
 if (mimeType.match(/image\/*/) == null) {
  this.message = "Only images are supported.";
  return;
 }
 var reader = new FileReader();
 this.imagePath = files;
 reader.readAsDataURL(files[0]); 
 reader.onload = (_event) => { 
 this.imgURL = reader.result; 
}
}

以及组件视图中的这些代码行

 <span style="color:red;" *ngIf="message">{{message}}</span>
 <input #file type="file" accept='image/*' (change)="preview(file.files)" />
 <img [src]="imgURL" height="200" *ngIf="imgURL">

Answer 7

使用@HostListner怎么办，因为Angular没有附带用于文件输入的内置值访问器。

  @HostListener('change', ['$event.target.files'])
  emitFiles( event: FileList ) {
    const file = event && event.item(0);
    this.onChange(file);
    const reader = new FileReader();
    reader.readAsDataURL(file); // toBase64
    reader.onload = () => {
      this.imageURL = reader.result as string; // base64 Image src
    };

然后在HTML中，您可以使用类似以下内容的

：

  <picture >
    <source media='(min-width:0px)' [srcset]="imageURL">
    <img src=""  [alt]="Your photo">
  </picture>

以角度5上传之前的图像预览

7 个答案: