Загрузка изображений с помощью aurelia в основной сервер asp.net - PullRequest
Новая
       23

Загрузка изображений с помощью aurelia в основной сервер asp.net

0 голосов
/ 26 февраля 2019

Я искал решение для этого, но ни одно из руководств не обновлено и не подходит для моего намерения.Мне нужно, чтобы загруженное пользователем изображение было загружено в javascript / aurelia, который затем отправляет его в основной сервер asp.net с помощью клиента http fetch, чтобы изображение сохранялось на диске (а не в базе данных).В настоящее время я использую следующий код, но получаю следующую ошибку, и изображения не сохраняются.

извлечение из HTML-кода, используемого для загрузки изображения 

<input class="hiddenButton" id="images" type="file" accept=".jpeg" file.bind="image"> 
<button class="upload" onclick="document.getElementById('images').click()">
    <i class="fa fa-pencil" style="color:green"></i>
</button>

извлечение javascriptкод, используемый для вызова сохранения 

save() {
    this.api.saveEmployee(this.employee).then(employee => this.employee = employee);

    this.ea.publish(new EmployeeAdded(this.employee));

    this.api.saveImage(this.image);

    return this.employee;
}

код Javascript / aurelia 

saveImage(image) {
    var form = new FormData()
    form.append('image', image)

    this.http.fetch('/api/Images', {
        method: 'POST',
        //headers: { 'Content-Type': image.type },
        body: form
    })
    .then(response => {
        return response
    })
    .catch(error => {
        console.log("Some Failure...");
        throw error.content;
    })

    return true;
}

основной код MVC Asp.net (серверная часть) 

[HttpPost]
public async Task<IActionResult> SaveImage(IFormFile file)
{
    Console.WriteLine("Images controller");
    var filePath = Path.Combine(Directory.GetCurrentDirectory(),"Image");
    using (var stream = new FileStream(filePath, FileMode.Create))
    {
        await file.CopyToAsync(stream);
    }

    return Ok();
}

сообщение об ошибке

enter image description here

1 Ответ

0 голосов
/ 27 февраля 2019

Элемент HTML <input type="file" /> не имеет свойства file, правильное свойство - files, поэтому похоже, что проблема связана с aurelia / javascript и привязкой.

Поскольку свойство files - это FileList (коллекция), вам необходимо получить доступ к первому файлу в коллекции.Даже если вы не использовали multiple Я думаю, files все еще будет коллекцией.

Вы можете попробовать это: 

// html 
<input class="hiddenButton" id="images" type="file" accept=".jpeg" files.bind="image">
//                                                                     ^ files

// jss/aurelia
saveImage(image) {
    var form = new FormData();
    form.append('image', image[0]);    // access the first image in collection image[0]

    // the other code remains the same
    //...
}

PS Я не использовал aurelia, поэтому могуНе уверен на 100%, что это проблема, но, надеюсь, направит вас в правильном направлении.

PPS: поскольку files - это коллекция, технически image в вашей модели представления также является коллекцией, поэтому выможно было бы переименовать его в images, чтобы сделать его более четким (даже если вы используете только одно изображение).Он все еще должен работать, используя image[0], но images[0] будет более понятным.

...