图像和数组字段在 React JS 上发送 Null

Question

你好，请帮帮我 这是我的控制器，如果我在没有 ApiRequest 的情况下通过邮递员发送图像，它可以捕获。但是我无法在我的 React 应用程序上捕捉图像。我也无法获得数组字段。在这个 ProductCreateRequest 模型中有一个 List 字段。我用数组发送 axios 这个字段，但 .net 核心无法捕获。我疯了，请帮助我，我不明白为什么

这是我的控制器代码

[HttpPost]
        [Consumes("application/json", "multipart/form-data")]
        public ApiResponse<bool> CreateProduct([FromForm] ApiRequest<ProductCreateRequest> request)
        {
            //this.ValidateRequest(request, null);
            var productRequest = request.data;
            var response = _productService.CreateProduct(productRequest);
            string message = String.Empty;
            if (productRequest.ProductImages !=null)
            {
                foreach (var image in productRequest.ProductImages)
                {

                    var addedImage = this.UploadFileAsync(image, "image/jpeg");

                    if (addedImage.Result.Status == ImageUploadState.Success)
                    {
                        var responseImage = _imageService.CreateImage(addedImage.Result, response.Id, "ProductId");
                        if (!responseImage)
                            message = "An error was on upload Image ! Please try again but you should first look which image cant upload !";
                    }
                    if (addedImage.Result.Status == ImageUploadState.NotExist)
                    {
                        message = addedImage.Result.ErrorMessage;
                    }
                    if (addedImage.Result.Status == ImageUploadState.Error)
                    {
                        message = addedImage.Result.ErrorMessage;
                    }
                }
            }
            if (productRequest.ProductType == ProductType.Accessory && productRequest.ParentProductId == null)
            {
                message = message == String.Empty ? "Accessory added but it is not assigned to any product." : message + "***and***" + "Accessory added but it is not assigned to any product.";
            }
            return this.Response(true,message, null);
        }

这是我的 ApiRequest Class

[DataContract(Name ="api-request"),Serializable]
    public class ApiRequest<T>
    {
        public ApiRequest(T data,byte[] token)
        {
            this.data = data;
            this.token = token;
        }
        public T data { get; set; }
        public byte[] token { get; set; }
        public string Language { get; set; }

    }

这是我的产品请求模型

    [DataContract(Name ="product-create-request"),Serializable]
    public class ProductCreateRequest
    {
        public double UnitPrice { get; set; }
        public int UnitStock { get; set; }
        public string Description { get; set; }

        [FromForm(Name ="productImages")]
        public IEnumerable<IFormFile> ProductImages { get; set; }
        public List<TechnicalInfo> TechnicalInfos { get; set; }
        public int MainCategoryId { get; set; }
        public int CategoryId { get; set; }
        public int? ParentProductId { get; set; }

        public List<Product> SubProduct { get; set; }
        public ProductType ProductType { get; set; }

    }

这是我的 React App 代码

    const data = new FormData();
        data.append('data',JSON.stringify(product));
        const url = `${process.env.REACT_APP_API_URL}/product/createproduct`;
        const config = {
            headers: { 'content-type': 'multipart/form-data' },
        };
        const values = {
            data,
            language: 'tr-TR',
        };
        await axios.post(url, data, config);

请帮助我，我不明白为什么我无法捕获数组值。

Answer 1

i can't catch images on my React Application. Also i cant get arrays fields.

为了达到你的文件post数据的要求，并且能够很好的绑定到action参数，你需要做如下修改：

1) class ApiRequest

的无参数构造函数

[DataContract(Name = "api-request"), Serializable]
public class ApiRequest<T>
{
    public ApiRequest()
    {

    }
    public ApiRequest(T data, byte[] token)
    {
        //...

注意：此文档显示 deserialization behavior within System.Text.Json

2)动态生成和填充表单数据，如下所示

const data = new FormData();
//...
data.append('language', language_here);

//...
data.append('data.unitStock', unitStock_here);
data.append('data.productImages', productImage1_here);
data.append('data.productImages', productImage2_here);
//...

注意：此文档解释了 what model binding is and how it works

3)要绑定byte[]数据，可能需要使用the ByteArrayModelBinder

测试结果

图像和数组字段在 React JS 上发送 Null

Image and Array Fields Send Null on React JS

.net

reactjs

asp.net-core

axios

multipartform-data