将音频上传到 Cloudinary [英] Uploading Audio to Cloudinary

问题描述

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

this is my first Stack Overflow post so please go easy on me!

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

I'm building an audio recording app using EXPO as the SDK with React Native. One of the main features of the app is to be able to to record live audio as well as uploading audio from the client's device. By leveraging Expo's Audio API and FileSystem, I'm successfully able to record and save live audio and then retrieve it via FileSystem to upload, however I'm running in an error when I try to pass the localUri to upload to my Cloudinary database. There is very little documentation in regards to audio and audio uploads to cloudinary are clumped into video uploads so there's nothing audio specific to really point me in the right direction. I've tried converting the URI to base64 as well as a variety of MIME types but the response from Cloudinary with a secure url returns empty/undefined. I've successfully uploaded images with this method so you can imagine how frustrating it is. Here's my code that grabs a recording and tries to upload it to 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))
    }

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

This call prints the following to the console:

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 & 从客户端成功上传音频到 Cloudinary反应原生?谢谢！

Does anyone see any glaring issues or have any insight on this issue? Better yet, successfully uploaded audio to Cloudinary from the client using Expo & React Native? Thanks!

推荐答案

虽然我不能确定为什么上传失败而没有看到 Cloudinary 返回的错误，但我创建了一个工作 JSFiddle 可用于上传 Base64 数据 URI 编码的音频文件(在我的示例中为 1 秒音频以保持简短).只需在 API 端点 URL 中替换您的云名称并设置上传预设.在您的帐户中成功上传后，您可以将示例替换为您的 Base64 数据 URI，看看它是否有效.这将告诉您问题是否与 Base64 字符串本身有关.话虽如此，分享 Cloudinary 返回的错误将是最好的指标.

While I can't say for certain why the uploads fail in your case without seeing the error returned by Cloudinary, I have created a working JSFiddle which you can use to upload a Base64 data URI encoded audio file (1-second audio in my example to keep it short). Just replace your cloud name in the API endpoint URL and set the upload preset. Once that uploads successfully in your account you can replace the example with your Base64 Data URI and see if it works or not. That will tell you if the issue is with the Base64 String itself. Having said that, sharing the error returned by Cloudinary would be the best indicator.

示例代码如下:

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

这篇关于将音频上传到 Cloudinary的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！