我是Reactjs的新手，我尝试从Reactjs组件上传多个图像，并在后端使用C# Web API，但每次我在Web API操作方法中获得Request.Form.Files计数=0时，我都能够上传图像;e图像，但现在尝试与多个和面临的问题，下面是组件代码：

import Header from './Header'
import { Button } from 'react-bootstrap'
import { useEffect, useState } from 'react';

function Add() {

    const [productName, setProductName] = useState("");
    const [productCode, setProductCode] = useState("");
    const [productPrice, setProductPrice] = useState("");
    const [productDescription, setProductDescription] = useState("");
    const [productImage, setProductImage] = useState([]);

    // useEffect(()=>{

    //     AddProduct();

        
    // },[] )

    async function AddProduct() {

       // let data={productName, productCode, productPrice, productDescription}

        const formData = new FormData();
        for(let i=0;i<productImage.length;i++){
            // console.log(productImage)
            formData.append("productImage"+i, productImage);
       }
        // formData.append("productImage", productImage);
        formData.append("productName", productName);
        formData.append("productCode", productCode);
        formData.append("productPrice", productPrice);
        formData.append("productDescription", productDescription);
        formData.append("userName",localStorage.getItem("UserName"));

        console.warn("Sonu ", formData)
        console.log(productImage)

        let result = await fetch("https://localhost:44353/ApiProduct/AddProduct", {
            method: "POST",
            headers: {},
            body: formData,
        })
        let response=await result.json();
        if(response.status)
        {
            alert (response.successMessage)
        }
        else{
            alert (response.errorMessage)

        }

    }
    function onImageChange(e) {
        setProductImage([...e.target.files]);
      }
        return (

            <div>
                <Header />
                <h1>Add Product</h1>
                <div className='col-6 offset-3' >
                    <input type="text" placeholder='productName'  className='form-control' onChange={(e) => setProductName(e.target.value)} /><br /><br />
                    <input type="text" placeholder='productCode'  className='form-control' onChange={(e) => setProductCode(e.target.value)} /><br /><br />
                    <input type="text" placeholder='productPrice'  className='form-control' onChange={(e) => setProductPrice(e.target.value)} /><br /><br />
                    <input type="text" placeholder='productDescription'  className='form-control' onChange={(e) => setProductDescription(e.target.value)} /><br /><br />
                    <input type="file"  multiple accept=".jpg"  className='form-control' onChange={(e) => onImageChange(e)} /><br /><br />
                    

                    <Button onClick={AddProduct}>Add Products</Button>
                </div>
            </div>

        );
    }

    export default Add;

以下是API代码。

public ResponseData AddProduct([FromForm] IList<IFormFile> files)
                        {
            ProductModel productModel = new ProductModel();
            if(files?.Any())
            {
            // Each time in my case files count is showing zero.
            }
            else
            {
            // other Logic
            }
            }