javascript - 将带有数据和文件的 javascript 对象发送到 asp.net core

Question

我需要使用 javascript 中的文件发送数据反对asp.net core但当它到达 asp.net core 方法时，以空值到达 ( List<Upload> listUpload )

我做了一个测试，从 javascript 对象中删除了 File 属性，它不再显示为 null，问题在于 File 属性无法与名为 IFormFile 类型的 File 的模型属性映射。

javascript代码:

jQuery('#tblDocuments > tbody > tr').each(function () {
   checkBox = jQuery(this).find('td').eq(0).children();

   inputFile = jQuery(this).find('td').eq(2).children()[0].files[0]; 

    let Upload = {
        File: inputFile,
        CodigoVendaArquivo: res,
        CodigoClienteArquivo: cliente,
        Checkbox: checkBox[0].id
    };
    listUpload.push(Upload);
});

我正在尝试使用 fetch 发送:

fetch('../../upload', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(listUpload)
}).then(res => res.json())
.then(res => {

    if (res == 1) {
     // success
    }

});

这是我的 asp.net core方法:

[Route("upload")]
[HttpPost]
public JsonResult Upload([FromBody] List<Upload> listUpload)
{
    // something
}

这是我的模型:

public class Upload
{
    public IFormFile File { get; set; }
    public string CodigoVendaArquivo { get; set; }
    public string CodigoClienteArquivo { get; set; }
    public string Checkbox { get; set; }
}

Answer 1

避免在 IFormFile 类中嵌入 Upload。当上传诸如 IList<Upload> 之类的内容(其列表项具有 IFormFile 属性)时，您可能会遇到导致疯狂内存泄漏的错误(它吃了我大约 6.7G 内存，直到我解决它)。欲了解更多信息，请参阅

• ASP.NET Core #4802
• ASP.NET MVC #8782

解决这个问题的最简单方法(如 WahidBitar comments on GitHub )是创建一个包装器来接收有效负载。

<小时/>

至于你的问题本身，你应该避免在 IFormFile 类中嵌入 Upload 。

这是一个工作示例:

public class UploadPayload{    public IList<Upload> Uploads{get;set;}    public class IFormFileWrapper {        public IFormFile File { get; set; }    }    public class Upload    {        // See https://github.com/aspnet/Mvc/issues/8782        
  
   public IFormFile File { get; set; }
          public IFormFileWrapper CodigoFile { get; set; }        public string CodigoVendaArquivo { get; set; }        public string CodigoClienteArquivo { get; set; }        public string Checkbox { get; set; }    }}

And also change your action method as below:

  
   public JsonResult Upload([FromBody] List listUpload)
  public IActionResult Upload(UploadPayload listUpload){     ... }

Client Side :

To construct a formData, create a getFormData() function :

    function getFormData(listUpload){
        var formData = new FormData();
        function getFieldName(index,name){
            return "Uploads[" + index + "]." + name ;
        };
        function getFileName(index,name){
            return "Uploads[" + index + "].CodigoFile." + name ;
        };

        for(var i =0 ;i <listUpload.length; i++){
            var upload = listUpload[i];
            formData.append(getFieldName(i, 'CodigoVendaArquivo'), upload.CodigoVendaArquivo);
            formData.append(getFieldName(i, 'CodigoClienteArquivo'), upload.CodigoClienteArquivo);
            formData.append(getFieldName(i, 'Checkbox'),upload.Checkbox)
            formData.append(getFileName(i, 'File'), upload.File);
        }
        return formData;
    }

现在我们可以通过以下方式发送 formData:

    jQuery('#tblDocuments > tbody > tr').each(function () {        ...        listUpload.push(Upload);    }    var formData = getFormData(listUpload);    fetch('../../upload', {        method: 'POST',        headers: {            'Accept': 'application/json',            
  
   'Content-Type': 'application/json'
          },        
  
   body: JSON.stringify(listUpload),
          body:formData,    })    .then(res => res.json())    .then(res => {        if (res == 1) {            // success        }    });