Загрузка изображения в приложение ASP.NET Core с использованием AJAX - PullRequest
Новая
       8

Загрузка изображения в приложение ASP.NET Core с использованием AJAX

0 голосов
/ 28 августа 2018

Я новичок в jQuery и AJAX и пытаюсь загрузить изображение на свой сервер, используя его. У меня есть простая HTML-страница 

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
<form method="post" enctype="multipart/form-data">
    Select image to upload:
    <input id="profilePic" name="picture" type="file" size="1" onchange="uploadFile('profilePic');" />
</form>

где файл скрипта 

function uploadFile(inputId) {
var fileUpload = $("#" +inputId).get(0);
var files = fileUpload.files;
var formData = new FormData();
formData.append(files[0].name, files[0]);

$.ajax({
    url: '/Image/File',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function (result) {
    }
});

В моем контроллере с именем ImageController у меня есть метод POST с именем File, который принимает нулевые аргументы: 

[HttpPost]
public IActionResult File()
{
    var file = Request.Form.Files[0];

    if (file != null)
    {
        //work
    }

    return null;
}

но каждый раз, когда я отправляю изображение в форму, ничего не происходит, и я получаю код 500: внутренняя ошибка сервера, не удалось загрузить ресурс. Я поместил точки останова в мой код, но он никогда не входил в метод File. Что я делаю неправильно? htmlpage и скрипт находятся в wwwroot, контроллер в папке Controllers.

1 Ответ

0 голосов
/ 28 августа 2018

Во-первых, ваше действие должно принимать изображение в качестве параметра: 

// Don't use `File` here. You're hiding the base `File` method.
public IActionResult FileUpload(IFormFile file)
{
    // Always check content length
    if (file?.ContentLength > 0)
    {
        //work
    }

    return null;
}

Тогда в вашем JS первым параметром FormData.append должно быть имя данных, а не имя файла. Поскольку параметром действия является file, имя здесь также должно быть file: 

formData.append('file', files[0]);
...