angular上傳圖片到.netcore後端

html代碼

input設置display：none，經過點擊button觸發file input

<input id="upload" type="file" name="files" accept="image/*">
<button ion-button icon-only (click)="triggerFileUpload($event)">
    <ion-icon name="camera-outline"></ion-icon>
</button>

複製代碼

預覽

<img [src]="url" class="image-preview" />
複製代碼

angular ts代碼

triggerFileUpload方法

triggerFileUpload(event: any) {
    let element: HTMLElement = document.getElementById('upload') as HTMLElement;
    element.click();
    element.onchange = (e: any) => {
        if (e.target && e.target.files.length) {
            let reader = new FileReader();
            reader.onload = (onloadEvent: any) => {
              this.url = onloadEvent.target.result;
            }

            reader.readAsDataURL( e.target['files'].item(0));
        }
        
        // this.imageUpload.nativeElement.value = '';
    }
}
複製代碼

angular service

FileUpload(file: File): Promise<any> {
    return new Promise((resolve, reject) => {
        const formData: FormData = new FormData();
        formData.append('files', file, file.name)

        this.http.post(APIConstant.FileUpload,formData).subscribe(result => {
            resolve(result);
        });
    });
}
複製代碼

dotnet core 代碼

model

public class FileUploadModel
{
    public IFormFile files { get; set; }
}
複製代碼

[FromForm] recieve params

[HttpPost]
public async Task<IActionResult> FileUpload([FromForm]FileUploadModel files)
{
    ...
    var stream = files.files.OpenReadStream();
    ...
}
複製代碼