android - 将音频上传到Cloudinary

Question

这是我的第一个Stack Overflow帖子，所以请放轻松!

我正在使用EXPO作为带有React Native的SDK构建一个录音应用程序。该应用程序的主要功能之一是能够录制实时音频以及从客户端设备上载音频。通过利用Expo的音频API和FileSystem，我可以成功记录和保存实时音频，然后通过FileSystem检索它以上传，但是当我尝试传递localUri来上传到Cloudinary数据库时却出现了错误。关于音频的文件很少，并且将音频上载到cloudinary的内容集中在视频上载中，因此没有什么音频可以真正指向正确的方向。我尝试将URI转换为base64以及各种MIME类型，但是来自Cloudinary的响应(带有安全url)返回空/未定义。我已经使用这种方法成功上传了图片，因此您可以想象它有多令人沮丧。这是我的代码，它获取记录并尝试将其上传到Cloudinary:

      DocumentPicker.getDocumentAsync({
        type: '*/*',
        copyToCacheDirectory: true,
        base64: true
      })
      .then(succ => {
        //check out the saved info
        console.log(succ, `path: ${succ.uri}, type: ${succ.type}, name: ${succ.id}, size: ${succ.size}`)

      let Base64 = {/* Truncated Base64 object*/};

      let base64Aud = `data:audio/x-wav;base64, ${Base64.encode(succ.uri)}`;

      let cloud = `https://api.cloudinary.com/v1_1/${CLOUD_NAME}/upload`;

         const data = {
        'file': base64Aud,
        'upload_preset': CLOUDINARY_UPLOAD_PRESET,
        'resource_type': 'video',
      }
        fetch(cloud, {
          body: JSON.stringify(data),
          headers: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          method: 'POST',
        })
        .then(async r => {
            let data = await r.json()
            console.log('cloudinary url:', data.secure_url)
            return data.secure_url
      })
      .catch(err => console.log(err))
    }

此调用将以下内容打印到控制台:

Object {
  "name": "20200117_143416.mp4",
  "size": 519612343,
  "type": "success",
  "uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252Faloud-aaf24bff-8000-47f0-9d1c-0893b81c3cbc/DocumentPicker/c922deb7-fd4f-42d9-9c28-d4f1b4990a4c.mp4",
} path: file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252Faloud-aaf24bff-8000-47f0-9d1c-0893b81c3cbc/DocumentPicker/c922deb7-fd4f-42d9-9c28-d4f1b4990a4c.mp4, type: success, name: undefined, size: 519612343
data:audio/x-wav;base64, ZmlsZTovLy9kYXRhL3VzZXIvMC9ob3N0LmV4cC5leHBvbmVudC9jYWNoZS9FeHBlcmllbmNlRGF0YS8lMjU0MGFub255bW91cyUyNTJGYWxvdWQtYWFmMjRiZmYtODAwMC00N2YwLTlkMWMtMDg5M2I4MWMzY2JjL0RvY3VtZW50UGlja2VyL2M5MjJkZWI3LWZkNGYtNDJkOS05YzI4LWQ0ZjFiNDk5MGE0Yy5tcDQ=
cloudinary url: undefined

是否有人看到任何明显的问题或对此问题有任何见解？更好的是，是否使用Expo＆React Native从客户端成功将音频上传到Cloudinary？谢谢!

Answer 1

虽然无法确定为什么在您的情况下上传失败，但看不到Cloudinary返回的错误，但是我创建了一个有效的JSFiddle，您可以使用它来上传Base64数据URI编码的音频文件(本例中为1秒音频)保持简短)。只需在API端点URL中替换您的云名称并设置上传预设即可。成功上传到您的帐户后，您可以将示例替换为Base64 Data URI，然后查看它是否有效。这将告诉您问题是否出在Base64 String本身上。话虽如此，共享Cloudinary返回的错误将是最好的指示。

下面的示例代码:

var fd = new FormData();

fd.append("file", "data:audio/mpeg;base64,SUQzBAAAAAABBFRYWFgAAAASAAADbWFqb3JfYnJhbmQ...");

fd.append("upload_preset", "");
fd.append("resource_type", "video")

fetch('https://api.cloudinary.com/v1_1/cloud_name_here/upload',
  {
    method: 'POST',
    body: fd
  }
);