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

Question

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

数据: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
    });
};

Answer 1

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

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