使用Zendesk Upload API上传图片损坏 如何正确转换图片为二进制格式

问题根因 #

你当前代码的核心错误是将blob对象包裹在普通JS对象中作为请求体，axios默认会对该对象执行JSON序列化，直接破坏了原始二进制图片数据，这就是接口返回201但图片显示空白的原因。
参考官方curl示例可知，请求体需要直接传递原始二进制数据，不能做额外封装。

修正后的axios实现 #

const uploadImages = async (imageUri) => {
    try {
        const filename = getFilenameFromImagePicker(imageUri);
        const resImg = await fetch(imageUri);
        const blobImg = await resImg.blob();

        // 注意：请求体直接传blob对象，不要包裹在{}中
        const response = await axios.post(`uploads?filename=${filename}`, 
            blobImg, // 直接传递二进制数据作为body
            {
                auth: {
                    username: membersEmail + '/token',
                    password: ZENDESK_API_KEY
                },
                headers: {
                    'Content-Type': 'application/binary',
                }
            }
        )
        // 用完blob记得释放内存
        blobImg.close();
        return response.data;
    }
    catch (error) {
        captureException(error);
        return null;
    }
}

更适配Expo环境的实现（推荐） #

因为你使用Expo的expo-image-picker获取图片，直接使用expo-file-system的上传能力更稳定，不需要额外转blob：
首先安装依赖：npx expo install expo-file-system
代码实现：

import * as FileSystem from 'expo-file-system';

const uploadImages = async (imageUri) => {
    try {
        const filename = getFilenameFromImagePicker(imageUri);
        const uploadUrl = `https://${你的子域名}.zendesk.com/api/v2/uploads?filename=${filename}`;
        
        const uploadResult = await FileSystem.uploadAsync(
            uploadUrl,
            imageUri,
            {
                httpMethod: 'POST',
                headers: {
                    'Content-Type': 'application/binary',
                    'Authorization': 'Basic ' + btoa(`${membersEmail}/token:${ZENDESK_API_KEY}`)
                },
                uploadType: FileSystem.FileSystemUploadType.BINARY_CONTENT
            }
        );

        if (uploadResult.status === 201) {
            return JSON.parse(uploadResult.body);
        }
        throw new Error(`上传失败，状态码：${uploadResult.status}`);
    } catch (error) {
        captureException(error);
        return null;
    }
}

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