Javascript React axios以数据形式发送多个图像

我有一个react组件，用于将多个图像上载到服务器

react组件如下所示

import React, { Component } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { addNewProduct } from "../../redux/actions";

class Admin extends Component {

    state = {
        ProductImg: [],
    };

    handleImageChange = e => {
        const ProductImg = e.target.files
        this.setState({
            ProductImg
        })
    }

    handleProductSubmit = (event) => {
        event.preventDefault();
        this.props.addNewProduct(
            this.state.ProductImg
        );
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleProductSubmit} autoComplete="off">
                    <input type="file" id="customFile" name="ProductImg" multiple onChange={this.handleImageChange} />
                    <button type="submit" className="btn btn-dark">Upload Product</button>
                </form>
            </div>
        );
    }
}


const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({ addNewProduct }, dispatch);
};

export default connect(null, mapDispatchToProps)(Admin);

export const addNewProduct = (ProductName, ProductCategory, ProductImg) => (dispatch) => {
    console.log("this is from inside the actions");


    console.log('============this is product images inside actions========================');
    console.log(ProductImg);
    console.log('====================================');

    const productData = new FormData();
    productData.append("ProductName", ProductName)
    productData.append("ProductCategory", ProductCategory)
    ProductImg.forEach(image => {
        productData.append("ProductImg", image);
    });

    axios.post("http://localhost:4500/products/", productData,
        {
            headers: {
                "Content-Type": "multipart/form-data"
            }
        })
        .then(res => {
            console.log('====================================');
            console.log("Success!");
            console.log('====================================');
        })
        .catch(err =>
            console.log(`The error we're getting from the backend--->${err}`))
};

我已经为它做了后端，它可以接受多个图像（我用postman检查过）。后端以接受对象数组的方式编写

当我尝试使用它时，我得到一个错误“ProductImg.forEach不是一个函数”

我已经看过stackoverflow的回答-->

---

如何实现这一点？

当您上传图像时，

e.target.files

将为您提供对象的实例，该对象的原型上没有定义

forEach

函数

这里的解决方案是使用

array.from

您可以将操作中的代码更改为creator

Array.from(ProductImg).forEach(image => {
    productData.append("ProductImg", image);
});

或者您可以使用一种扩展语法，如

[...ProductImg].forEach(image => {
    productData.append("ProductImg", image);
});

---

上载图像时，

e.target.files

将为您提供对象的实例，该对象的原型上未定义

forEach

函数

这里的解决方案是使用

array.from

您可以将操作中的代码更改为creator

Array.from(ProductImg).forEach(image => {
    productData.append("ProductImg", image);
});

或者您可以使用一种扩展语法，如

[...ProductImg].forEach(image => {
    productData.append("ProductImg", image);
});

---

您可以添加

ProductImg

日志的屏幕截图吗？您可以添加

ProductImg

日志的屏幕截图吗？