如何通过.ajax以base64编码发布图像？

小编典典

如何通过.ajax以base64编码发布图像？

ajax

我有一些JavaScript代码可将图像上传到服务器。下面是可以正常工作的ajax调用。

$.ajax({
    url: 'https://api.projectoxford.ai/vision/v1/analyses?',
    type: 'POST',
    contentType: 'application/json',
    data: '{ "Url": "http://images.takungpao.com/2012/1115/20121115073901672.jpg" }',
})

我现在需要将图像上传为base64编码，例如

data: 'data:image/jpeg;base64,/9j/4AAQSkZJRgA..........gAooooAKKKKACiiigD//Z'

但这是行不通的，即服务器无法识别我发送和抱怨的数据。

有谁知道在AJAX调用中发送base64编码数据的正确格式是什么？

阅读 226

2020-07-26

共1个答案

小编典典

感谢所有帮助我前进的答案。

我也已在 https://social.msdn.microsoft.com/Forums/en-
US/807ee18d-45e5-410b-a339-c8dcb3bfa25b/testing-project-oxford-ocr-how-to-
例如，在base64中使用一个本地文件？forum =
mlapi（更多特定于牛津大学的项目），在他们的答案和您的答案之间，我有解决方案。

您需要发送一个Blob
您需要在.ajax调用中设置processData:false和contentType: 'application/octet-stream'选项

所以我的解决方案看起来像这样

首先是制作斑点的功能（从比我更有天赋的人逐字复制）

makeblob = function (dataURL) {
            var BASE64_MARKER = ';base64,';
            if (dataURL.indexOf(BASE64_MARKER) == -1) {
                var parts = dataURL.split(',');
                var contentType = parts[0].split(':')[1];
                var raw = decodeURIComponent(parts[1]);
                return new Blob([raw], { type: contentType });
            }
            var parts = dataURL.split(BASE64_MARKER);
            var contentType = parts[0].split(':')[1];
            var raw = window.atob(parts[1]);
            var rawLength = raw.length;

            var uInt8Array = new Uint8Array(rawLength);

            for (var i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
            }

            return new Blob([uInt8Array], { type: contentType });
        }

然后

$.ajax({
    url: 'https://api.projectoxford.ai/vision/v1/ocr?' + $.param(params),
    type: 'POST',
    processData: false,
    contentType: 'application/octet-stream',
    data: makeblob('data:image/jpeg;base64,9j/4AAQSkZJRgA..........gAooooAKKKKACiiigD//Z'
 })
.done(function(data) {alert("success");})
.fail(function() {alert("error");});

2020-07-26