Question

我一直在寻找解决方案，但是没有指南更新或适合我的意图。我需要将用户上传的图像加载到javascript / aurelia中，然后使用其http获取客户端将其发送到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
    //...
}

我没有使用过aurelia，所以不能100％地确定这是问题所在，但希望能为您指明正确的方向。

PPS：由于files是一个集合，从技术上讲，视图模型中的image也是一个集合，因此您可以考虑将其重命名为images以使其更清晰（即使您仅使用一张图片）。使用image[0]仍然可以使用，但是images[0]会更清晰。

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

1 个答案: