将图像(base64 字符串)作为文件流上传到 Web API

Posted

技术标签:

【中文标题】将图像(base64 字符串)作为文件流上传到 Web API【英文标题】:Uploading an image (base64 string) to Web API as filestream 【发布时间】:2017-06-21 11:15:14 【问题描述】:

我需要做的:我有一个使用网络摄像头拍摄照片的网页。当您单击一个按钮时,它会将当前的网络摄像头图像保存到一个 html 画布对象中。当我从画布对象中获取图像时,它以 Base64 编码字符串的形式出现,例如

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAABwCAYAAAD8HIl9AAAgAElEQVR4Xky9B7hld3Hl...

另一端是用于将照片保存到服务器的 Web API 服务。它是用 C# 编写的,需要一个 FileStream。

我的前端仅使用 HTML 和 javascript(包括 Angular/Jquery)编写。我需要以它期望的格式将图像发送到服务器。

我已经用头撞墙两天了。看来我需要做的是创建一个 FormData 对象,将图像附加到它,然后发送它。但这样做会给我一个 200 错误。有些东西没有正确形成。

虽然我使用文件类型的输入元素并从磁盘上传文件,但这段代码运行良好。当我将base64图像字符串传递给它时,它失败了。当我将图像字符串附加到 FormData 对象时,它会失败。

factory.setPhoto = function (id, image) 
    var fd = new FormData();
    fd.append('file', image);
    return $http.post(baseUrl + '/' + id, fd, 
        transformRequest: angular.identity,
        headers:  'Content-Type': undefined 
    ).then(function (results) 
        // whatever
    );
;

【问题讨论】:

【参考方案1】:

您应该将 base64 数据组件转换为原始二进制数据,然后通过 formdata 传递它。尝试本文中的解决方案之一。

https://***.com/a/5100158/1980415

【讨论】:

以上是关于将图像(base64 字符串)作为文件流上传到 Web API的主要内容,如果未能解决你的问题,请参考以下文章

PHP已知图片base64流上传到服务器

如何使用 Node.js 将 base64 编码图像(字符串)直接上传到 Google Cloud Storage 存储桶?

小程序base64图片解析成流上传服务器

使用 aws-sdk 将 gm 调整大小的图像流上传到 s3

如何使用颤振将 Base64 字符串解码为图像文件

将base64字符串编码的图像/字节图像作为图像在Flutter中用于Firebase ML Vision中进行处理