将图像(base64字符串)作为文件流

时间:2017-02-04 00:32:07

标签: javascript angularjs asp.net-web-api upload image-upload

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

数据:图像/ PNG; BASE64,iVBORw0KGgoAAAANSUhEUgAAAJYAAABwCAYAAAD8HIl9AAAgAElEQVR4Xky9B7hld3Hl ...

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

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

我一直在靠墙撞墙两天。似乎我需要做的是创建一个FormData对象,将图像附加到它,然后发送它。但这样做会给我200个错误。有些东西形成不正确。

虽然我使用类型为file的input元素,并从磁盘上传文件,但此代码可以正常工作。当我传递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 个答案:

答案 0 :(得分:1)

您应该将base64数据组件转换为原始二进制数据,然后将其传递给formdata。试试这篇文章中的一个解决方案。

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