如何使用 Zendesk Upload API 上传图像

Question

我正在使用下面的功能在 zendesk 上上传图像。 Zendesk 要求图像以二进制形式上传，并且当我在 Firebase 上上传时，获取 blob 图像方法可以正常工作。这些函数得到响应 201，但当你检查图像时，它只是一个白色方块。我认为图像在上传过程中已损坏。

imageUri 从 expo-image-picker 返回，如下所示：

文件：/data/user/0/host.exp.exponent/cache/ExperienceData/.../ImagePicker/8543faa5-b996-46cd-9554-ce9afb61385b.jpg

const uploadImages = async (imageUri) => {

    try {
        const filename = getFilenameFromImagePicker(imageUri);
    
        const resImg = await fetch(imageUri);
        const blobImg = await resImg.blob();
    
        const response = await axios.post(`uploads?filename=${filename}`, {
            blobImg
        }, {
            auth: {
                username: membersEmail + '/token',
                password: ZENDESK_API_KEY
            },
            headers: {
                'Content-Type': 'application/binary',
            }
        })
    
        return response.data;
    }
    catch (error) {
        captureException(error);
        return null;
    }

}

将图像更改为二进制以便上传到 zendesk 的最佳方法是什么？

下面是 Zendesk 文档中用于上传图像的curl语句

curl "https://{subdomain}.zendesk.com/api/v2/uploads?filename=myfile.dat&token={optional_token}" \
  -data-binary @file.dat \
  -v -u {email_address}:{password} \
  -H "Content-Type: application/binary" \
  -X POST

Answer 1

这是我的 typescript 解决方案，它有效。 file 是来自

的文件

static uploadVideo = async (file:any) => {  
    // first get our hands on the local file
    const localFile = await fetch(URL.createObjectURL(file));
    // then create a blob out of it 
    const fileBlob = await localFile.blob();
    const url = `${YOUR_URL}/v2/uploads?filename=${file?.name}`
    return await axios({
        method: "POST",
        url: url,
        data: fileBlob,
        headers: {'Content-Type': 'application/binary'}
    })
}

Answer 2

经过大量测试，我能够使其工作。在这里发布我想出的答案，以防其他人遇到同样的问题。

async function uploadImages (imageUri) {
        // first get our hands on the local file
        const localFile = await fetch(imageUri);
    
        // then create a blob out of it (only works with RN 0.54 and above)
        const fileBlob = await localFile.blob();
    
        // then send this blob to filestack
        const serverRes = await fetch('https://www.yourAwesomeServer.com/api/send/file', { // Your POST endpoint
            method: 'POST',
            headers: {
              'Content-Type': application/binary,
            },
            body: fileBlob, // This is your file object
        });
    
        const serverJsonResponse = await serverRes.json();
        return serverJsonResponse;
    }