使用 aurelia 将图像上传到 asp.net 核心后端

Question

我一直在为此寻找解决方案，但 none 指南已更新或适合我的意图。我需要将用户上传的图像加载到 javascript/aurelia，然后使用其 http fetch 客户端将其发送到 asp.net 核心后端，以便将图像保存在磁盘上（而不是数据库中）。我目前正在使用以下代码，但出现以下错误并且未保存任何图像。

从用于上传图片的 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;
}

Asp.net 核心 MVC 代码（后端）

[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();
}

错误信息

Answer 1

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] 会更清楚。

使用 aurelia 将图像上传到 asp.net 核心后端

Uploading images using aurelia to asp.net core backend

javascript

c#

asp.net-core-mvc

aurelia

aurelia-fetch-client