将图像(base64 字符串)作为文件流上传到 Web API
Uploading an image (base64 string) to Web API as filestream
我需要做什么:我有一个使用网络摄像头拍摄照片的网页。单击按钮时,它会将当前网络摄像头图像保存到 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
});
};
您应该将 base64 数据组件转换为原始二进制数据,然后通过 formdata 传递它。尝试此 post.
中的解决方案之一
我需要做什么:我有一个使用网络摄像头拍摄照片的网页。单击按钮时,它会将当前网络摄像头图像保存到 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
});
};
您应该将 base64 数据组件转换为原始二进制数据,然后通过 formdata 传递它。尝试此 post.
中的解决方案之一