【解決方法】angular 8からASP.NETコア3 Web APIにデータを含むファイルをアップロードする方法

プログラミングQA


こんにちは、みんな、
.net core(v3) Web API と Angular プロジェクトを作成したので、ファイルとその他のデータ (名前、期間など) を含むオブジェクトを送信しようとしました。

私のAngularコンポーネントコード:-

JavaScript
 saveMovie() {
    this.submitted = true;
    if (this.movieFormGp.invalid) {
      return;
    }
    this.movieFormGp.patchValue({ rating: this.currentRate });
    let movieData= new FormData();
    movieData.append("name", this.movieFormGp.get('name').value);
    movieData.append("Duration", this.movieFormGp.get('duration').value);
    movieData.append("Review", this.movieFormGp.get('review').value);   
    movieData.append("GenresIDs",JSON.stringify( [4,6]));   
movieData.append("PosterImg",this.posterImage);

console.log(movieData);
    this.movieService.addMovie(movieData).subscribe((resp)=>{
      console.log(resp);
    },error=>{
      console.error(error);
    })
  }

Angular サービス コード:-

JavaScript
 headers={
    headers: new HttpHeaders({
      'enctype': 'multipart/form-data',
      'Accept': 'application/json'
    })
};
addMovie(movie:any)
  { 
    return this.http.post<any>(environment.baseAPIUrl+'Movies/addMovie',movie);
  }

.net モデル:-

C#
public class CreateMovieDTO
    {
        public int Id { get; set; }
        [Required]
        public string Name { get; set; }
        public string Duration { get; set; }
        public string Review { get; set; }       
        public List<int> GenresIDs { get; set; }
        public bool IsFavorite { get; set; }
        public DateTime AddedOn { get; set; }       
        public IFormFile PosterImg { get; set; }
        public CreateMovieDTO()
        {
            GenresIDs = new List<int>();
        }
    }

API メソッド:-

C#
 [Route("api/[controller]")]
    [ApiController]
    [AllowAnonymous]

    public class MoviesController : ControllerBase
    {
 private readonly IMovieRepository _repository;
        private readonly DataContext _context;

        public MoviesController(IMovieRepository repository, DataContext context)
        {
            _repository = repository;
            _context = context;
        }
 [HttpPost("addMovie")]
        public async Task<IActionResult> AddMovie([FromForm] CreateMovieDTO movieDTO)
        {
            try
            {
                if (movieDTO == null)
                {
                    return BadRequest("object is null");
                }
                var reqFile = Request.Form.Files;
                var movie = new Movie()
                {                   
                    Name = movieDTO.Name,                   
                    Duration = movieDTO.Duration,
                    Review = movieDTO.Review,
                };

                foreach (var item in movieDTO.GenresIDs)
                {
                    var genre = await _repository.GetGenre(item);
                    movie.MovieGenres.Add(new MovieGenres { Genres = genre, Movie = movie });
                }
                _repository.Add<Movie>(movie);
                var response = await _repository.SaveAll();
                return Ok(response);
            }
            catch (Exception exp)
            {

                return BadRequest(exp);
            }
        }
}

私が試したこと:

送るだけなら ファイルのない JSON データ[FromBody] その後、正常に動作しますが、追加すると フォームデータを含むファイル それから API メソッドでは、すべてのプロパティが null です APIメソッドにヒットしましたが。
私が使用する場合 [FromForm] formdata を使用すると、API メソッドにはヒットしませんが、 ネットワーク コールに Request Status 200 が表示される

助けてください..

ありがとうございます。
ジャヤンタ

解決策 1

WebAPI 組み込みフォーマッターは、次のメディア タイプのみをサポートします。 application/jsontext/jsonapplication/xmltext/xmlapplication/x-www-form-urlencoded

今、あなたの文脈では、あなたはやろうとしています:

API method that has to send form-data format to the server

これの意味は:
1. サーバーがコンテンツ タイプ ペイロードとして複数の形式を受け入れることを確認する必要があります。
2. 確信が持てたら、 multipart/form-data、あなたが送っているものです、見てください ASP.NET WebApi: MultipartDataMediaFormatter[^]

試してみる。

解決策 3

まだ解決されていない同じ問題があります。

私のAPIコード:

HttpPut("updateThemeDetail/{whiteLabelId}")]
public async Task<IActionResult> UpdateThemeDetail([FromForm]TenantThemeSetUpInput item, string whiteLabelId)
{............

モデル DTO:

public class TenantThemeSetUpInput
 {
     public string? ThemePrimaryColor { get; set; }
     public string? ThemeAccentColor { get; set; }
     public string? ThemeName { get; set; }
     public IFormFile? LoginBanner { get; set; }
     //public IFormFile? PageBanner { get; set; }
     public IFormFile? SecondaryLogo { get; set; }
     public IFormFile? PrimaryLogo { get; set; }

 }

角度のある部分は、質問で述べたものと同じです。
すべてのプロパティがnullのAPIメソッドを取得しています

この問題の解決にご協力ください。

コメント

タイトルとURLをコピーしました