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();
    ...
}
复制代码

转载于:https://juejin.im/post/5c8b08ef6fb9a049e06439be