Question

我正在尝试从移动设备将图像上传到Microsoft Computer Vision API，但我不断收到400错误文件格式请求“输入数据不是有效图像”。文档说明我可以以下列形式将数据作为application / octet-stream发送：

[二值图像数据]

我有base64编码的图像数据（“/ 9j / 4AAQSkZJ ..........”），我也把图像作为FILE_URI，但我似乎无法找出发送数据的格式。以下是示例代码：

$(function() {
    $.ajax({
        url: "https://api.projectoxford.ai/vision/v1.0/describe",
        beforeSend: function (xhrObj) {
            // Request headers
            xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
            xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", computerVisionKey);
        },
        type: "POST",
        // Request body
        data: base64image,
        processData: false        
    })
    .done(function(data) {
      alert("success");
    })
    .fail(function(error) {
      alert("fail");
    });
});

我尝试了以下内容：

[base64image]
{base64image}
“data：image / jpeg; base64，”+ base64image
“image / jpeg; base64，”+ base64image

等等。

我在Computer Vision API控制台上测试了这些。是因为base64编码的二进制文件不是可接受的格式吗？或者我是否以完全不正确的格式发送它？

注意：将URL作为application / json发送时，该操作有效。

Answer 1

请查看Emotion API Project Oxford base64 image，或直接转到此处的代码段：How to post an image in base64 encoding via .ajax?。

由于这是一个反复出现的主题，我已经发出了一项功能请求，要求API直接在UserVoice处理数据URI。

Answer 2

只是想添加它以防万一它可以帮助其他人。上面的cthrash引用的答案工作正常，但它引导我采用一种更简单的方法，不将图像转换为base64，然后再转换为二进制。

只需将图像作为ArrayBuffer读取，然后使用它为帖子正文构建一个新的Blob。另外，不要忘记将processData设置为false。完整的解决方案如下所示：

//onChange event handler for file input
function fileInputOnChange(evt) {
    var imageFile = evt.target.files[0];     
    var reader = new FileReader();
    var fileType;

    //wire up the listener for the async 'loadend' event
    reader.addEventListener('loadend', function () {

        //get the result of the async readAsArrayBuffer call
        var fileContentArrayBuffer = reader.result;

            //now that we've read the file, make the ajax call
            $.ajax({
                url: "https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect",
                beforeSend: function (xhrObj) {
                    // Request headers
                    xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
                    xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "<your subscription key goes here>");
                },
                type: "POST",

                //don't forget this!
                processData: false,

                //NOTE: the fileContentArrayBuffer is the single element 
                //IN AN ARRAY passed to the constructor!
                data: new Blob([fileContentArrayBuffer], { type: fileType })
            })
            .done(function (data) {
                console.log(data)
            })
            .fail(function (err) {
                console.log(err)
            });

    });
    if (imageFile) {
        //save the mime type of the file
        fileType = imageFile.type;

        //read the file asynchronously
        reader.readAsArrayBuffer(imageFile);
    }    
}

Microsoft认知服务：上传图片

2 个答案: