将音频上传到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和FileSystem，我可以成功记录和保存实时音频，然后通过FileSystem进行检索以上传，但是当我尝试传递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& amp;从客户端成功将音频上传到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返回的错误的情况下，但是我已经创建了一个有效的

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屋！