Cách tải tệp từ Angular lên ASP.NET Core Web API

Những câu hỏi tương tự đã được đặt ra nhưng sau khi xem qua tất cả những câu hỏi đó và nhiều bài đăng trên blog về chủ đề này, tôi không thể tìm ra điều này vì vậy xin hãy thứ lỗi cho tôi.

Tôi đang tạo một blog đơn giản với (cho mục đích của câu hỏi này) hai phần, một giao diện người dùng SPA trong Angular 8 và một API phụ trợ trong ASP.NET Core 3. Trong một phần của giao diện người dùng, tôi đang cố gắng tải lên một hình ảnh được sử dụng làm hình ảnh cho một blog mới tạo. Khi tôi cố gắng tải lên một hình ảnh, IFormFile kết quả trong phần phụ trợ luôn xuất hiện null. Dưới đây là mã, bất kỳ trợ giúp nào cũng được đánh giá cao!

new-blog.component.html:

<form [formGroup]="newBlogForm" (ngSubmit)="onSubmit(newBlogForm.value)">

    <div>
        <label for="Name">
            Blog Name
        </label>
        <input type="text" formControlName="Name">
    </div>

    <div>
        <label for="TileImage">
            Tile Image
        </label>
        <input type="file" formControlName="TileImage">
    </div>

    <button type="submit">Create Blog</button>

</form>

new-blog.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { BlogService } from '../blog-services/blog.service';

@Component({
  selector: 'app-new-blog',
  templateUrl: './new-blog.component.html',
  styleUrls: ['./new-blog.component.css']
})
export class NewBlogComponent implements OnInit {
  private newBlogForm: FormGroup;

  constructor(private formBuilder: FormBuilder, private blogService: BlogService) { }

  ngOnInit() {
    this.newBlogForm = this.formBuilder.group({
      Name: new FormControl(null),
      TileImage: new FormControl(null)
    });
  }

  onSubmit(blogData: FormData) {
    console.log('new blog has been submitted.', blogData);
    this.blogService.postBlog(blogData);
    this.newBlogForm.reset();
  }

}

postBlog từ blog.service.ts:

  postBlog(blogData: FormData): Observable<any> {
    const postBlogSubject = new Subject();
    this.appOptions.subscribe(
      (options) => {
        const url = options.blogAPIUrl + '/Blogs';
        this.http
          .post(url, blogData)
          .subscribe(
            (blog) => {
              postBlogSubject.next(blog);
            }
          );
      }
    );
    return postBlogSubject.asObservable();
  }

Chữ ký cho BlogController của tôi trông giống như sau:

[HttpPost]
public async Task<ActionResult<Blog>> PostBlog([FromForm]PostBlogModel blogModel)

với PostBlogModel như sau:

    public class PostBlogModel
    {
        public string Name { get; set; }
        public IFormFile TileImage { get; set; }
    }

Tôi đã triển khai phần mềm trung gian ghi nhật ký để cố gắng gỡ lỗi. Kết quả như sau (Tôi thấy rằng vì một số lý do mà giao diện người dùng gửi ứng dụng / json thay vì đa phần / biểu mẫu-dữ liệu nhưng tôi không chắc tại sao hoặc cách khắc phục ...)

blogapi_1  | info: Microsoft.AspNetCore.Hosting.Diagnostics[2]
blogapi_1  |       Request finished in 170.16740000000001ms 500
blogapi_1  | info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
blogapi_1  |       Request starting HTTP/1.1 OPTIONS http://localhost:5432/api/v1/Blogs
blogapi_1  | dbug: BlogAPI.Middleware.RequestResponseLoggingMiddleware[0]
blogapi_1  |       HTTP Request: Headers:
blogapi_1  |            key: Connection, values: keep-alive
blogapi_1  |            key: Accept, values: */*
blogapi_1  |            key: Accept-Encoding, values: gzip, deflate, br
blogapi_1  |            key: Accept-Language, values: en-US,en-IN;q=0.9,en;q=0.8,en-GB;q=0.7
blogapi_1  |            key: Host, values: localhost:5432
blogapi_1  |            key: Referer, values: http://localhost:5431/blog/new-blog
blogapi_1  |            key: User-Agent, values: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36
blogapi_1  |            key: Origin, values: http://localhost:5431
blogapi_1  |            key: Access-Control-Request-Method, values: POST
blogapi_1  |            key: Access-Control-Request-Headers, values: content-type
blogapi_1  |            key: Sec-Fetch-Site, values: same-site
blogapi_1  |            key: Sec-Fetch-Mode, values: cors
blogapi_1  |
blogapi_1  |        type:
blogapi_1  |        scheme: http
blogapi_1  |        host+path: localhost:5432/api/v1/Blogs
blogapi_1  |        queryString:
blogapi_1  |        body: 
blogapi_1  | info: Microsoft.AspNetCore.Cors.Infrastructure.CorsService[4]
blogapi_1  |       CORS policy execution successful.
blogapi_1  | dbug: BlogAPI.Middleware.RequestResponseLoggingMiddleware[0]
blogapi_1  |       HTTP Response: Headers:
blogapi_1  |            key: Access-Control-Allow-Headers, values: Content-Type
blogapi_1  |            key: Access-Control-Allow-Origin, values: http://localhost:5431
blogapi_1  |
blogapi_1  |        statusCode: 204
blogapi_1  |        responseBody: 
blogapi_1  | info: Microsoft.AspNetCore.Hosting.Diagnostics[2]
blogapi_1  |       Request finished in 58.5088ms 204
blogapi_1  | info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
blogapi_1  |       Request starting HTTP/1.1 POST http://localhost:5432/api/v1/Blogs application/json 56
blogapi_1  | dbug: BlogAPI.Middleware.RequestResponseLoggingMiddleware[0]
blogapi_1  |       HTTP Request: Headers:
blogapi_1  |            key: Connection, values: keep-alive
blogapi_1  |            key: Content-Type, values: application/json
blogapi_1  |            key: Accept, values: application/json, text/plain, */*
blogapi_1  |            key: Accept-Encoding, values: gzip, deflate, br
blogapi_1  |            key: Accept-Language, values: en-US,en-IN;q=0.9,en;q=0.8,en-GB;q=0.7
blogapi_1  |            key: Host, values: localhost:5432
blogapi_1  |            key: Referer, values: http://localhost:5431/blog/new-blog
blogapi_1  |            key: User-Agent, values: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36
blogapi_1  |            key: Origin, values: http://localhost:5431
blogapi_1  |            key: Content-Length, values: 56
blogapi_1  |            key: Sec-Fetch-Site, values: same-site
blogapi_1  |            key: Sec-Fetch-Mode, values: cors
blogapi_1  |       
blogapi_1  |        type: application/json
blogapi_1  |        scheme: http
blogapi_1  |        host+path: localhost:5432/api/v1/Blogs
blogapi_1  |        queryString:
blogapi_1  |        body: {"Name":"test","TileImage":"C:\\fakepath\\DSC_0327.jpg"}

BlogController của tôi trông như thế này:

[HttpPost]

public async Task<ActionResult<Blog>> PostBlog([FromForm]PostBlogModel blogModel)

Có vẻ như bạn muốn chuyển dữ liệu bằng cách sử dụng dữ liệu biểu mẫu, để đạt được điều đó, bạn có thể tham khảo mẫu mã sau.

.component.html

<form [formGroup]="newBlogForm" (ngSubmit)="onSubmit(newBlogForm.value)">

  <div>
      <label for="Name">
          Blog Name
      </label>
      <input type="text" formControlName="Name">
  </div>

  <div>
      <label for="TileImage">
          Tile Image
      </label>
      <input type="file" formControlName="TileImage" (change)="onSelectFile($event)" >
  </div>

  <button type="submit">Create Blog</button>

</form>

.component.ts

selectedFile: File = null;
private newBlogForm: FormGroup;
constructor(private http: HttpClient) { }

ngOnInit() {
  this.newBlogForm = new FormGroup({
    Name: new FormControl(null),
    TileImage: new FormControl(null)
  });
}

onSelectFile(fileInput: any) {
  this.selectedFile = <File>fileInput.target.files[0];
}

onSubmit(data) {
  
  const formData = new FormData();
  formData.append('Name', data.Name);
  formData.append('TileImage', this.selectedFile);

  this.http.post('your_url_here', formData)
  .subscribe(res => {

    alert('Uploaded!!');
  });

  this.newBlogForm.reset();
}

Kết quả kiểm tra

Đầu tiên

<input type="file">ràng buộc với góc bằng cách sử dụng ngModelhoặc formControlNamesẽ chỉ bắt value propertynhưng thực sự khi chúng tôi gửi biểu mẫu, chúng tôi cần files propertyđể chúng tôi có thể tạo chỉ thị tùy chỉnh sẽ áp dụng cho tất cả các <input type="file">phần tử dự án để khi chúng tôi gửi biểu mẫu, chúng tôi có thuộc tính tệp

Trước

import { Directive, forwardRef, HostListener, ElementRef, Renderer2 } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';


@Directive({
    selector : `input[type=file][formControlName], 
    input[type=file][formControl],
    input[type=file][ngModel]`,
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: FileValueAccessorDirective,
            multi: true
        }
    ]
})
export class FileValueAccessorDirective implements ControlValueAccessor {

    constructor(private elementRef: ElementRef, private render: Renderer2) {

    }

    // Function to call when the file changes.
    onChange = (file: any) => {}


    //fire when the form value changed programmaticly
    writeValue(value: any): void {

    }

    //fire only one time to register on change event
    registerOnChange = (fn: any) => { this.onChange = fn; }


    //fire only one time to register on touched event
    registerOnTouched = (fn: any) => { }


    //Disable the input
    setDisabledState?(isDisabled: boolean): void {

    }

    //listen to change event
    @HostListener('change', ['$event.target.files'])
    handleChange(file) {
        this.onChange(file[0]);
    }

}

Sau

Thứ hai

Để tải tệp lên bằng Http, dữ liệu của bạn phải được mã hóa bằng cách multipart/form-datacho phép gửi tệp qua bài đăng http để tại sao FormDatađược sử dụng,

Đối tượng FormData sẽ tự động tạo dữ liệu yêu cầu với dữ liệu đa phần / biểu mẫu kiểu MIME mà các máy chủ hiện có có thể xử lý. Để thêm trường tệp vào dữ liệu, bạn sử dụng đối tượng Tệp mà phần mở rộng có thể tạo từ đường dẫn tệp. Đối tượng FormData sau đó có thể đơn giản được chuyển đến XMLHttpRequest:

Http Tải lên Tệp

vì vậy phương pháp gửi của bạn sẽ giống như

onSubmit() {
      let formData: FormData = new FormData();
        Object.keys(this.newBlogForm.value).forEach(key => {
            formData.append(key, this.newBlogForm.value[key])
        });
    //pass formData to your service
  }

Thrid

Trong postBlogphương thức của bạn mà bạn đang tạo Subjectmà không có bất kỳ lợi ích nào, bạn chỉ có thể trả về http.post sau đó trong phương thức người gọi, hãy sử dụng specifiy cho dù bạn subscribehay sử dụng async/awaitđể kích hoạt lệnh gọi http

onSubmit() {
   .....
    this.postBlog(formData).subscribe(
        result => { }
    );
}

async onSubmit() {
   .....
    let res = await this.postBlog(formData).toPromise();
}