如何为图像制作POST方法？

Question

因此，我一直在使用此API，直到现在我尝试弄清楚如何制作将图像作为参数的POST方法时，我才遇到问题。从理论上讲，这应该是这样的：

您将从网页上载一张图像，然后使用到API的路由，将图像信息发送到数据库，如下所示：

现在，我一直在不同的页面上寻找答案，但实际上没有一个帮助。实际上，我发现的唯一指南是关于将该方法集成到Web Api中的信息（请参阅https://www.c-sharpcorner.com/article/uploading-image-to-server-using-web-api-2-0/），但这对我来说实际上是行不通的，因为我无法继承解决方案中的某些方法。例如，使用上面的链接，我在HttpContext.Current上遇到了问题，我想这是因为我当前正在使用的解决方案。但是，这是另一个要问的问题。

所以我的方法看起来很像这样：

public class RecipeController : Controller
{
    private readonly Func<SqlConnection> _connFactory;
    public RecipeController(Func<SqlConnection> connFactory)
    {
        _connFactory = connFactory;
    }

    [Route("v1/recipe/{recipeBy}")]
    [HttpGet()]
    public List<Recipe> GetRecipes(string recipeBy)
    {
        using (var con = _connFactory())
        {
            con.Open();
            return con.Query<Recipe>("SELECT * FROM dbo.Recipe WHERE RecipeBy = @recipeBy", new { recipeBy }).ToList();
        }
    }
    ....

我正在使用Dapper将值传递到数据库。

因此，我的问题是：如何编写一个POST方法，将上载的图像作为参数，然后将其传递给数据库？我确实意识到这个问题很模糊，因为我什至没有提供可重现的代码。关键是，直到现在，我什至都没有想出正确的方法开始工作，因此我无法真正提供任何有用的代码来帮助我。任何提示，提示，建议，教程...任何东西都欢迎！

Answer 1

您可以通过使用Html5 FileReader类将图像读取到客户端上的字符串，然后将其发布到api端点来完成此操作：

function UploadImage()
{
    var file = input[0].files[0];

    var reader = new FileReader();

    reader.onloadend = function () {
        var imageDataString = reader.result;
        // post the fileString value to your api here
    }

    if (file) {
        reader.readAsDataURL(file);
    }
}

然后在控制器上，将Base64String转换为字节[]并将其存储在数据库中：

if (imageDataString != null && imageDataString != String.Empty)
{
    string imageDataParsed = imageDataString.Substring(imageDataString.IndexOf(',') + 1);
    byte[] imageBytes = Convert.FromBase64String(imageDataParsed);
}