Question

我希望能够在我的网站上实现Project Oxford的Emotion API。我目前编写了以下HTML / JavaScript代码，用于检查URL中的图像，并在运行Emotion API后显示所述图像的结果：

componentWillReceiveProps(nextProps) {
    this.setState({
        children: nextProps.children
    });
}

此代码工作正常，但我希望在我的网站上实现这一点，以便人们使用浏览按钮从本机上本地上传图像，而不是使用链接查找图像。非常感谢任何帮助！

Answer 1

我使用application/octet-stream作为正文类型来模拟这一点，它允许您发布二进制对象（即图像本身），而不是图像的URL。 Emotion API documentation详细说明了这是支持的内容类型。

我继续按照你原来的例子使用JQuery。

您应该能够将整个示例复制并粘贴到HTML文件中，将Emotion API密钥添加到my-key处，然后才能生效

<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>

<body>
    <input type="file" id="file" name="filename">
    <button id="btn">Click here</button>

    <script type="text/javascript">
        $('#btn').click(function () {

            var file = document.getElementById('file').files[0];

            $.ajax({
                    url: "https://api.projectoxford.ai/emotion/v1.0/recognize",
                    beforeSend: function(xhrObj) {
                        // Request headers
                        xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
                        xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "my-key");
                    },
                    type: "POST",
                    data: file,
                    processData: false
                })
                .done(function(data) {
                    JSON.stringify(data);
                    alert(JSON.stringify(data));
                })
                .fail(function(error) {
                    alert(error.getAllResponseHeaders());
                });
        });
    </script>
</body>

</html>

实施Microsoft的Project Oxford - Emotion API和文件上传

1 个答案: