如何使用 Zendesk Upload 上传图片 API

Question

我正在使用以下功能在 zendesk 上上传图片。 Zendesk 要求上传二进制图像，当我在 Firebase 上上传时，获取 blob 图像方法正在运行。这些功能得到响应 201 但是当您检查图像时，它只是一个白色方块。我认为图片在上传过程中损坏了。

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

file:/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 的最佳方法是什么？

Below is the curl statement from Zendesk's documentation for uploading images

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

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

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;
    }

Answer 2

这是我的 typescript 解决方案并且有效。文件是来自

的文件

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'}
    })
}

如何使用 Zendesk Upload 上传图片 API

how to upload images using Zendesk Upload API

react-native

zendesk-api