时间戳

首页 > 解决方案 > 如何使用 Zendesk Upload API 上传图片

react-native - 如何使用 Zendesk Upload API 上传图片

问题描述

我正在使用下面的功能在 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 的最佳方法是什么？

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

标签： react-nativezendesk-api

解决方案

这是我的打字稿解决方案，它有效。 文件是来自

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

推荐阅读