将带有嵌套模型文件的 ReactJs FormData 发布到 .net core 2.2 web api答案

【问题标题】：Posting ReactJs FormData with nested model files to .net core 2.2 web api将带有嵌套模型文件的 ReactJs FormData 发布到 .net core 2.2 web api
【发布时间】：2020-08-15 17:57:36
【问题描述】：

我正面临这个问题。我的文件 js 中有这个嵌套模型

                                    var request={
                                        idCliente:form.idCliente,
                                        appUserId:user.data.id,
                                        idFiliale:user.data.idFiliale,
                                        idSuggeritore:form.idSuggeritore,
                                        contrattoLuceRequest:{
                                            numeroContratto:form.contratti[0].numeroContratto,
                                            idTipoContratto:form.contratti[0].idTipoContratto,
                                            idTipoOperazione:form.contratti[0].idTipoOperazione,
                                            idStatoContratto:form.contratti[0].idStatoContratto,
                                            note:form.contratti[0].note,
                                            numeroPod:form.contratti[0].contrattoLuce.numeroPod,
                                            allegati:form.contratti[0].allegatiContratto
                                        },
                                        formFiles:form.contratti[0].allegatiContratto
                                    }

对象“contrattoLuceRequest”的属性“allegati”和对象“request”的“formFiles”，是使用组件Material Ui Dropzone上传的文件的集合。我必须将此模型发送到我的 .net core 2.2 web api 后端。这是我用来构建我的 formData 对象的服务。对于这个测试，我忽略了其他属性...我只关注“formFiles”和“allegati”属性。

let f = new FormData();
            for (var key2 in interazione.contrattoLuceRequest.allegati) {
                f.append("formFiles", interazione.contrattoLuceRequest.allegati[key2]);
            }
            for (var key3 in interazione.contrattoLuceRequest.allegati) {
                f.append("interazione.contrattoLuceRequest.allegati", 
                interazione.contrattoLuceRequest.allegati[key3]);
            }

我用 axios 全部发送到服务器

axios.post('/Interazioni',f,{
                    headers:{
                        'Content-Type':'multipart/form-data'
                    }
                }).then(response => {
                    resolve(response);
                }).catch(err=>{
                    return reject(err);
                })

这是 .net core 2.2 web api

        [HttpPost]
        public async Task<IActionResult> AddInterazione([FromForm] InterazioneRequest interazioneRequest)
        {
            try
            {
                if (interazioneRequest == null)
                    return BadRequest();
                await this.interazioniService.AddInterazione(interazioneRequest);
                return Ok();
            }
            catch (ArgumentException ex)
            {
                return StatusCode(409, ex.Message);
            }
            catch (Exception ex)
            {
                return StatusCode(500, ex.Message);
            }
        }

这是服务器模型“InterazioneRequest”

public class InterazioneRequest
    {
        public int? Id { get; set; }
        public int IdCliente { get; set; }
        public int AppUserId { get; set; }
        public int IdFiliale { get; set; }
        public int? IdSuggeritore { get; set; }
        public ContrattoLuceRequest ContrattoLuceRequest { get; set; }
        public ContrattoGasRequest ContrattoGasRequest { get; set; }
        public ContrattoDualRequest ContrattoDualRequest { get; set; }
        public ContrattoMultiEleRequest ContrattoMultiEleRequest { get; set; }
        public ContrattoMultiGasRequest ContrattoMultiGasRequest { get; set; }
        public IFormFileCollection formFiles { get; set; }
    }

这是“ContrattoLuceRequest”模型，用于我们的测试用例

public class ContrattoLuceRequest
    {
        public int? Id { get; set; }
        public string NumeroContratto { get; set; }
        public string NumeroPod { get; set; }
        public int IdStatoContratto { get; set; }
        public int IdTipoContratto { get; set; }
        public int IdTipoOperazione { get; set; }
        public string Note { get; set; }
        public IFormFileCollection Allegati { get; set; }       
    }

现在，问题来了。从前端我将所有数据发布到服务器，但只有“formFiles”的边界正确......对象“ContrattoLuceRequest”的嵌套属性“Allegati”始终为空。这是一个错误，还是我忽略了一些重要的事情？我还附上了在 Chrome Dev Tools 上发送到服务器的请求的屏幕截图。太感谢了

【问题讨论】：

标签： c# reactjs asp.net-core-webapi multipartform-data asp.net-core-2.2

【解决方案1】：

对不起各位。问题是这部分代码不正确

    for (var key3 in interazione.contrattoLuceRequest.allegati) {
        f.append("interazione.contrattoLuceRequest.allegati", 
        interazione.contrattoLuceRequest.allegati[key3]);
    }

正确的做法是去掉“interazione”级别，因为我在主级别的模型是“contrattoLuceRequest”，所以正确的代码是

for (var key3 in interazione.contrattoLuceRequest.allegati) {
    f.append("contrattoLuceRequest.allegati", 
    interazione.contrattoLuceRequest.allegati[key3]);
}

现在正在工作。对不起

【讨论】：