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

我一直在寻找解决方案，但没有一个指南是更新或适合我的意图。我需要一个用户上传的图像加载到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/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]
公共异步任务SaveImage（ifformfile）
{
Console.WriteLine（“图像控制器”）；
var filePath=Path.Combine（Directory.GetCurrentDirectory（），“Image”）；
使用（var stream=newfilestream（filePath，FileMode.Create））
{
等待文件.CopyToAsync（流）；
}
返回Ok（）；
}

错误消息

HTML元素

没有属性

文件

，正确的属性是

文件

，因此听起来问题在于aurelia/javascript和绑定

由于属性

文件

是一个

文件列表

（集合），因此需要访问集合中的第一个文件。即使您没有使用多个

文件，我认为
文件仍然是一个集合

你可以试试这个：

// 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
    //...
}

//html
//^文件
//jss/aurelia
保存图像（图像）{
var form=new FormData（）；
form.append（'image'，image[0]）；//访问集合映像[0]中的第一个映像
//其他代码保持不变
//...
}

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

PPS：因为>文件是一个集合，在你的视图模型中，技术上的代码“>图像/代码>也是一个集合，所以你可以考虑将它重命名为<代码>图像< /代码>以使它更清晰（即使你只使用一个图像）。使用
image[0]
它应该仍然可以工作，但是
images[0]
会更清晰。
这是一个服务器错误，请在
中包装服务器代码，尝试{}捕获{}
并进行一些调试。然后按照建议在这里发布错误，我添加了try{}catch{}，它消除了错误，而没有在控制台上引入任何新的错误。现在甚至可以根据需要创建一个图像文件，但当我将其保存为png或jpg并尝试在windows 10上打开时，显示保存的文件已损坏“看来我们不支持这种文件格式。你知道我的调试没有告诉我这一点的原因是什么吗？在我之前的评论中加上：没有字节被写入文件createdIs
file
null？什么是
file.Length
？能否显示图像的HTML以及对
saveImage
的调用？更改成功了！谢谢最初是这样的，但我改变了它，看看它是否是另一个问题的原因，并忘记了撤消更改。@JurgenAquilina我很高兴它起作用了。如果有帮助，请也投票：）
[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();
}

// 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
    //...
}