Загрузка аудио в Cloudinary

Question

это мое первое сообщение о переполнении стека, поэтому, пожалуйста, go спокойно на меня!

Я создаю приложение для записи звука, используя EXPO в качестве SDK с React Native. Одной из основных функций приложения является возможность записи живого звука, а также загрузка звука с устройства клиента. Используя Audio API и FileSystem в Expo, я успешно могу записывать и сохранять живое аудио, а затем извлекать его через FileSystem для загрузки, однако у меня возникает ошибка при попытке передать localUri для загрузки в мою облачную базу данных. Существует очень мало документации в отношении передачи аудио и аудио в облачные системы, которые объединены с загрузкой видео, поэтому нет ничего такого, что указывало бы c, чтобы действительно указать мне правильное направление. Я пытался преобразовать 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

Кто-нибудь видит какие-либо явные проблемы или имеет Любое понимание по этому вопросу? А еще лучше, успешно загрузить аудио в Cloudinary с клиента с помощью Expo & React Native? Спасибо!

Answer 1

Хотя я не могу точно сказать, почему загрузка не удалась в вашем случае, не увидев ошибку, возвращенную Cloudinary, я создал рабочий JSFiddle , который вы можете использовать для загрузки аудио в кодировке URI данных Base64. файл (1-секундный звук в моем примере, чтобы он был коротким). Просто замените свое имя облака в URL-адресе конечной точки API и установите предустановку загрузки. После успешной загрузки в вашу учетную запись вы можете заменить пример на URI-код Base64 и посмотреть, работает он или нет. Это скажет вам, если проблема связана с самой строкой 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
  }
);