Можно ли отправить список файлов и весь объект json в объекте FormData на контроллер ASP.NET CORE MVC - PullRequest
Новая
       20

Можно ли отправить список файлов и весь объект json в объекте FormData на контроллер ASP.NET CORE MVC

0 голосов
/ 25 июня 2019

Как и в заголовке, как отправить объект formdata на контроллер mvc, содержащий как объект json (включая вложенные объекты), так и список файлов. Я уже пытался преобразовать объект в объект json, но контроллер не может прочитать это свойство, он читает список файлов без проблем.

Вот метод контроллера: 

[HttpPost]
     public IActionResult CreateTask(Task task, IEnumerable<IFormFile> files)
        {

            //some code
        }

вот мой JavaScript: 

function createTask() {
        var formData = new FormData();
        var files = //some file objects

        var obj = {
            //some parameters 
        };


        var task = JSON.stringify(task);
        formData.append("task", task);
        formData.append("files", files);


        console.log(task);
        $.ajax({
            type: "POST",
            url: "/Task/CreateTask",
            processData: false,
            contentType: false,
            data: formData,
            success: function (data) {

            },
            error: function (data) {

            }
        })

    }

Мне нужен метод контроллера для одновременного чтения задачи и списка файлов, если это возможно.

Ответы [ 2 ]

1 голос
/ 25 июня 2019

Единственный способ сделать это - связать JSON, отправленный как task, со строкой на стороне сервера. Затем вам придется вручную десериализовать его в объект. В случае, если это не очевидно, это также означает, что вы не получите никакой проверки ни на одном из членов этого объекта JSON. Это будет просто строка для ASP.NET Core и связующего устройства.

Тем не менее, я думаю, что проблема заключается в том, что вам нужно загружать файлы и думать, что это требует публикации как multipart/form-data. На самом деле вы можете публиковать как JSON, но при этом включать загрузку файлов. Это требует двух изменений:

  1. Вы должны привязать файл «загрузки» к byte[] с, а не IFormFile с на стороне сервера.

  2. На стороне клиента, вы должны добавить их к публикуемому вами объекту JSON в виде строк в кодировке Base64 или массивов uint8.

Первая часть относительно проста. Десериализатор JSON, вызываемый связывателем моделей, автоматически преобразует строки, закодированные в Base64, в байтовый массив, и, конечно же, массив JS unint8 в любом случае, по сути, является просто байтовым массивом.

Вторая часть, вероятно, требует более подробного обсуждения. Вам потребуется использовать File API для чтения данных загружаемого файла, а затем преобразовать их в строку в кодировке Base64 или в массив uint8:

Base64 

var reader = new FileReader();
reader.onload = function(e) {
    let base64 = btoa(reader.result);
    myJsonObject.files.push(base64);
}
reader.readAsBinaryString(file);

Массив байтов 

var reader = new FileReader();
reader.onload = function(e) {
    let bytes = Array.from(new Uint8Array(reader.result));
    myJsonObject.files.push(bytes);
}
reader.readAsArrayBuffer(file);
0 голосов
/ 26 июня 2019

Вы можете попытаться преобразовать объект в данные формы, как показано ниже:

  1. Просмотр 

            <script type="text/javascript">
            $(document).ready(function () {
                $("input").change(function () {
                    var formData = new FormData();
                    var files = $("#files")[0].files;

                    var obj = {
                        id: 1,
                        name: "jack"
                    };
                    for (var key in obj) {
                        formData.append(key, obj[key]);
                    }
                    for (var key in files) {
                        formData.append("files", files[key]);
                    }


                    $.ajax({
                        type: "POST",
                        url: "/api/values/CreateTask",
                        processData: false,
                        contentType: false,
                        data: formData,
                        success: function (data) {

                        },
                        error: function (data) {

                        }
                    })

                });
            });
        </script>

  2. Контроллер 

            [HttpPost]
        public IActionResult CreateTask([FromForm]Task task, [FromForm]IEnumerable<IFormFile> files)
        {
            return Ok("Success");
        }
...