angular上传头像，上传图片/单张,多张

最新推荐文章于 2024-11-20 01:18:43 发布

原创最新推荐文章于 2024-11-20 01:18:43 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

angular 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了三种前端图片上传组件的实现方式：多张图片上传、单张照片上传及头像上传。通过HTML、TypeScript代码示例，展示了如何使用FileReader API读取图片文件并预览，适用于网页应用中图片上传功能的开发。

1. 上传多张图片

html

 <ImagePicker
            [files]="files"
            [multiple]="multiple"
            [selectable]="files.length < 5"
            [accept]="'image/gif,image/jpeg,image/jpg,image/png'"
            (onChange)="fileChange($event)"
            (onImageChange)="ImageChange($event)"
    ></ImagePicker>

ts

chengzjl: Mnjxchengzjl = new Mnjxchengzjl();
    files = [];
    multiple = false;

    ImageChange(params) {
        const {files, type, index} = params;
        this.files = files;
    }

    fileChange(params) {
        const {files, type, index} = params;
        this.files = files;
        this.chengzjl.zhaops = [];
        if (this.files.length > 0) {
            this.files.forEach(item => {
                this.chengzjl.zhaops.push(item.url);
            });
        }
    }

<div class="zhaop">
        <img *ngFor="let zhaop of item.zhaops" [src]="zhaop" alt="">
      </div>

在这里插入图片描述

2.上传单张照片

html

<div style="background: #ffffff" class="pt-2 pl-2">
    <div class="position-relative imgUpload">
      <div class="text-secondary border add" *ngIf="selectable">+</div>
      <input type="file" name="file" accept="image/*" (change)="handleFiles($event)">
      <img [src]="imageUrl" alt="">
    </div>
    <p class="text-secondary small pt-2" *ngIf="selectable">选填，可上传一张相关跟进图片</p>
  </div>

在这里插入图片描述

ts

genzjl: Genzjl = new Genzjl();
imageUrl;
selectable = true;

  handleFiles(event) {
        const reader = new FileReader();
        reader.onload = (e) => {
            // @ts-ignore
            this.imageUrl = e.target.result;
            this.selectable = false;
            this.genzjl.zhaop = this.imageUrl;
        };
        reader.readAsDataURL(event.target.files[0]);
    }

<div *ngIf="data.zhaop" class="genzjl">
     <img [src]="data.zhaop" alt="">
</div>

在这里插入图片描述

3.上传头像

html

<div class="position-relative" style="height: 3rem;">
            <div class="add">
                <ListItem [arrow]="'horizontal'"
                          [extra]="toux"
                >
                    头像
                    <ng-template #toux>
                        <img [src]="xueyxxData.zhaop" alt="">
                    </ng-template>
                </ListItem>
            </div>
            <input type="file" name="file" accept="image/*" (change)="handleFiles($event)">
        </div>

 handleFiles(event) {
        const reader = new FileReader();
        reader.onload = (e) => {
            // @ts-ignore
            this.xueyxxData.zhaop = e.target.result;
        };
        reader.readAsDataURL(event.target.files[0]);

    }

上传成功后另一个页面放置！

 <ion-avatar class="mt-1">
 <img [src]="xueyxxData.zhaop">
  </ion-avatar>

在这里插入图片描述