html Angular：下载并显示图像

Posted 2021-05-10

export interface IFileResponse {
    fileName?: string;
    fileDownloadUri?: string;
    fileType?: string;
    size?: number;
}

export class FileResponse implements IFileResponse {
    constructor(public fileName?: string, public fileDownloadUri?: string, public pubfileType?: string, public size?: number) {}
}

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';

type EntityResponseType = HttpResponse<IFileResponse>;
type EntityArrayResponseType = HttpResponse<IFileResponse[]>;

@Injectable({
    providedIn: 'root'
})
export class FileService {
    public resourceUrl = SERVER_API_URL + 'api/files';

    constructor(protected http: HttpClient) {}

    upload(file: File): Observable<EntityResponseType> {
        const formData = new FormData();
        formData.append('file', file);

        return this.http.post<IFileResponse>(`${this.resourceUrl}/`, formData, { observe: 'response' });
    }

    download(fileName: string) {
        return this.http.get(`${this.resourceUrl}/${fileName}`, { observe: 'response', responseType: 'blob' });
    }
}

export interface ICourse {
    imageUrl?: string;
}

export class Course implements ICourse {
    constructor(
        public imageUrl?: string
    ) {}
}

import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { FileService } from 'app/files/file.service';
import { IFileResponse } from 'app/shared/model/file-response.model';

@Component({
    selector: 'entity-update',
    templateUrl: './entity-update.component.html'
})
export class EntityUpdateComponent implements OnInit {
  imageMain?: File;
  
  constructor(
        //...
        protected fileService: FileService,
        protected fb: FormBuilder
    ) {}
    
    setNewForm(institutionId: number) {
        this.form = this.fb.group({
            imageUrl: new FormControl()
        });
    }
    
    onFileSelect(event) {
        if (event.target.files.length > 0) {
            const file = event.target.files[0];
            console.log('selected file: ' + file.name);
            this.imageMain = file;
        }
    }
    
    uploadMainImage(file: File) {
        console.log(`uploading main image: ` + file.name);
        this.fileService.upload(file).subscribe(
            (response: HttpResponse<IFileResponse>) => {
                this.course.imageUrl = response.body.fileName;
            },
            (res: HttpErrorResponse) => {
                console.error(`error saving file: ${file.name}`);
            }
        );
    }
}

<div class="form-group">
  <label class="form-control-label" for="imageMain">Image Main</label>
  <input type="file" formControlName="imageMain" name="imageMain" id="imageMain"
   (change)="onFileSelect($event)">
</div>

import { FileService } from 'app/files/file.service';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
    selector: 'entity-detail',
    templateUrl: './entity-detail.component.html'
})
export class EntityDetailComponent implements OnInit {
    imageMain?: Blob;
    imageUrl?;
    
    constructor(
        protected fileService: FileService,
        protected sanitizer: DomSanitizer
    ) {}
    
    ngOnInit() {
        this.activatedRoute.data.subscribe(({ entity }) => {
            this.entity = entity;
            this.fileService.download(this.entity.imageUrl).subscribe(res => {
                console.log('image downloaded...');
                this.imageMain = new Blob([res.body], { type: res.headers.get('Context-Type') });
                this.imageUrl = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(this.imageMain));
            });
        });
    }
}

 <!-- main image -->
<div>ImageMain: {{course.imageMain}}</div>
<img *ngIf="imageUrl" [src]="imageUrl"/>