React调用Computer Vision API如何传递本地图片而非URL并解决报错？

• 传参内容不符合要求：你通过FileReader.readAsDataURL拿到的结果是带data:image/xxx;base64,前缀的DataURL字符串，这个前缀不属于图片本身的内容，直接传入API会导致解析失败。
• 方法与参数不匹配：analyzeImage方法仅支持传入可公共访问的图片URL，要传本地图片的二进制数据，需要使用带InStream后缀的对应方法，比如analyzeImageInStream（提取图像特征）或readTextInStream（提取文本内容）。
• 请求头与传参类型不匹配：你已经将Content-Type设置为application/octet-stream，该类型要求请求体为纯二进制数据，直接传入字符串格式的DataURL完全不匹配格式要求。

1. 优先选择直接传递二进制流，无需转base64编码，修改文件读取逻辑直接存储File对象即可：

const handleChange = (e) => {
  const file = e.target.files[0];
  setFileSelected(file) // 直接存储File对象
}

2. 调用对应流处理方法，传入二进制数据：
   如果是提取图像特征，使用analyzeImageInStream：

// 把File对象转成Uint8Array二进制数组
const buffer = await fileSelected.arrayBuffer();
const binaryData = Uint8Array.from(buffer);
const analysis = await computerVisionClient.analyzeImageInStream(binaryData, { visualFeatures });

如果是提取图片文本，使用readTextInStream：

const buffer = await fileSelected.arrayBuffer();
const binaryData = Uint8Array.from(buffer);
const readResult = await computerVisionClient.readTextInStream(binaryData);

如果一定要使用base64格式的DataURL，需要先去掉前缀再转成二进制：

// 去掉DataURL的前缀部分
const pureBase64 = fileSelected.split(',')[1];
// base64转二进制数组
const binaryData = Uint8Array.from(atob(pureBase64), c => c.charCodeAt(0));
// 再传入对应的流处理方法即可

3. 额外检查项：确认上传的图片格式为JPEG、PNG、GIF、BMP等API支持的格式，图片大小不要超过对应层级的限制（免费层最大4MB，付费层最大50MB）。

内容的提问来源于stack exchange，提问作者Sarahrb