如何将多个图像从 angular 8 上传到 asp .net 核心 [英] How to upload multiple images from angular 8 to asp .net core

问题描述

过去一天我一直在寻找有关此问题的解决方案，但从未找到解决方案...

I was searching for a solution in the past day about this but never found a solution...

我使用来自数据从角度发送多张图像，如果我检查网络上的api调用，文件会被发送，但是当我检查api方法上的参数时，它显示count=0

I am sending multiple images from angular using from data and if i check the network for the api call the files are sended but when i check the parameters on the api method it shows count=0

角度代码

createProduct(product: any, images: File[]) {
// return this.http.post(this.createProductUrl, product).pipe(
  // switchMap((resp: Product) => {

    const colorId = '2';
    const productId = '3';
    const image = new FormData();

    for (let index = 0; index < images.length; index++) {
      image.append('files', images[index]);
    }


    return this.http.post(`${this.createImagesForProduct}/${productId}/color/${colorId}`, image)
    .pipe(map(
      resp => {
        return console.log(resp);
      }
    ));

后端方法

Google DevTools 网络标签

请我需要你的帮助

推荐答案

将你的请求体转化为模型

Convert your request body into model

public class Model{
  public int productId{get;set;}
  public int colorId{get;set;}
  public List<IFormFile> files{get;set;}
}

请求写入

public async Task<IActionResult> CreateImage(Model param){}

在 angular 中将所有元素放入 formdata

in angular put all elements into formdata

    const image = new FormData();
    image.append('productId',`${productId}`);
    image.append('colorId',`${colorId}`);
    for (let index = 0; index < images.length; index++) {
        image.append('files', images[index]);
    }
    return this.http.post(`${this.createImagesForProduct}`, image)
        .pipe(map(
          resp => {
            return console.log(resp);
          }
        ));

这篇关于如何将多个图像从 angular 8 上传到 asp .net 核心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！