Microsoft认知服务API的原始二进制数据

Question

对于Microsoft Azure Cognitive Services API，图像需要以这种格式传递

POST主体中传递的输入。支持的输入方法：原始图像二进制

因此，我非常不知道如何将用户上传的图像转换为该格式并发出API请求。我在前端使用ReactJS和NodeJs的后端。有人能帮我把图片换成正确的格式吗？我不确定是否必须将其作为数组缓冲区读取？

import React, { Component } from 'react';
import Button from 'react-bootstrap/Button';
class Dashboard extends Component {
constructor(props) {
super(props);
this.state ={
file: null
}
}
onSubmit = () => {
console.log(this.state.file);
// console.log(window.atob(this.state.file));
}
onChange = (e) => {
const file = e.target.files[0];
const reader = new FileReader()
reader.addEventListener("load", () => {
// convert image file to base64 string
console.log(reader);
// if (reader.result.includes("data:image/png;base64,")) {
//     img = reader.result.replace("data:image/png;base64,", "");
// } else { 
//     img = reader.result.replace("data:image/jpeg;base64,", ""); 
// }
//this.setState({file: img});
}, false);
if (file) {
reader.readAsArrayBuffer(file);
}

}
render() {
return(
<div>
<h3 style={{padding: '20px', textAlign: 'center', color: 'white', fontWeight: '100'}}>
Customize your playlist based on your mood!
</h3>
<h5 style={{margin: '30px', padding: '0px',textAlign: 'center', color: 'grey', display:'block'}}>
Click a picture of your surroundings or simply upload one based on what you're currently in the mood for and 
<br />
<br />
TuneIn will add a playlist according to your liking!
</h5>
<form onSubmit={this.onSubmit}>
<h1>File Upload</h1>
<input type="file" accept="image/png, image/jpeg" onChange={this.onChange}/>
<button type="submit">Upload</button>
</form>
</div>
);
}
}
export default Dashboard;

Answer 1

下面是使用Computer Vision REST API和javascript分析本地图像的示例。

https://github.com/Azure-Samples/cognitive-services-quickstart-code/blob/master/javascript/ComputerVision/ComputerVisionQuickstart.js