利用昨天學到的檔案上傳將檔案傳到 Service 處理

component.ts

constructor(
    private materialService: MaterialService,
) { }

/**
    * 新增圖片
    * @param name
    * @param file
*/
createImg(name: string, files: File[]) {
    this.materialService.createImg(name, files).subscribe();
}

在有檔案上傳的狀況會採用 FormData 物件當作 body

material.service.ts

/**
    * 上傳圖片
    * @param name
    * @param files
*/
createImg(name: string, files: File[]) {

    let formData = new FormData();
    formData.set('name',name);

    for (let i = 0; i < files.length; i++) {
        formData.set(`file${i}`, files[i]);
    }

    return this.apiService.postEvent('/xxxyyy', formData);
}

HttpClient 介紹可以參考我之前寫過的文章

https://ithelp.ithome.com.tw/articles/10208818

reportProgress：是否需要建立一個持續保持的通道

api.service.ts

/**
    * Post Api Event
    * @param path
    * @param body
    * @param header
*/
postEvent(path: string, body: FormData, header: HttpHeaders = new HttpHeaders()): Observable<HttpEvent<Object>> {
    return this.http.post(`https://abcdefg${path}`, body, { headers: header, observe: 'events', reportProgress: true });
}