将音频上传到 Cloudinary

Question

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

我正在使用 EXPO 作为带有 React Native 的 SDK 构建一个录音应用程序。该应用程序的主要功能之一是能够录制实时音频以及从客户端设备上传音频。通过利用 Expo 的音频 API 和文件系统，我能够成功地录制和保存实时音频，然后通过文件系统检索它以上传，但是当我尝试将 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 数据 URI，看看它是否有效。这将告诉您问题是否与 Base64 字符串本身有关。话虽如此，分享 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
  }
);