Отправить объект JavaScript с данными и файлом в ядро ​​asp.net

Question

Мне нужно отправить данные с файлом в javascript объекте на asp.net core, но когда он прибывает в основной метод asp.net, приходит с нулевыми значениями (List<Upload> listUpload)

Я сделал тестПри удалении свойства File из объекта javascript, и оно больше не имеет значения null, проблема заключается в том, что свойство File не может быть сопоставлено со свойством модели с именем File типа IFormFile.

javascript code:

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,7 Гб памяти, пока я к нему не обратился).Для получения дополнительной информации см.

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

Самый простой способ обойти это, как WahidBitar комментирует 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
        <strike>public IFormFile File { get; set; }</strike>
        public IFormFileWrapper CodigoFile { get; set; }
        public string CodigoVendaArquivo { get; set; }
        public string CodigoClienteArquivo { get; set; }
        public string Checkbox { get; set; }
    }
}

А также измените свой метод действий, как показано ниже:

<strike>public JsonResult Upload([FromBody] List listUpload)</strike>
public IActionResult Upload(UploadPayload listUpload)
{ 
    ... 
}

Сторона клиента:

Чтобы создать formData, создайте getFormData() функцию:

    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',
            <strike>'Content-Type': 'application/json'</strike>
        },
        <strike>body: JSON.stringify(listUpload),</strike>
        body:formData,
    })
    .then(res => res.json())
    .then(res => {
        if (res == 1) {
            // success
        }
    });