Javascript 向Cloudinary REACT NATIVE EXPO上传视频时出现问题

我正在尝试从手机录制视频并上传到Cloudinary

现在我尝试了以下代码：

const pickImage = async () => {
let result = await ImagePicker.launchCameraAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.Images,
  allowsEditing: true,
  aspect: [4, 3],
  base64: true,
});

if (!result.cancelled) {
  let base64Img = `data:image/jpg;base64,${result.base64}`;

  //Add your cloud name
  let apiUrl = "https://api.cloudinary.com/v1_1/bniaxee/image/upload";

  let data = {
    file: base64Img,
    upload_preset: "animationstudiogo",
  };

  fetch(apiUrl, {
    body: JSON.stringify(data),
    headers: {
      "content-type": "application/json",
    },
    method: "POST",
  })
    .then(async (r) => {
      let data = await r.json();
      console.log(data.secure_url);
      return data.secure_url;
    })
    .catch((err) => console.log(err));
}

})

这是有效的，但是

如果在ImagePicker的选项中设置了 mediaTypes:ImagePicker.MediaTypeOptions.Videos， 因为它不返回Base64，而Cloudinary以Base64格式接受它

现在我已经找到了将录像机视频转换为base64的方法，但它不起作用。。。我甚至使用了这个Javascript函数，但都不起作用

function toDataURL(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function () {
    var reader = new FileReader();
    reader.onloadend = function () {
        callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();

}

不知道该怎么办，请大家帮忙

---

注意：我不想退出EXPO

嘿，我在使用EXPO向Cloudinary上传视频时遇到了同样的问题，并且能够通过首先将视频上传到我的服务器（node.js）来解决这个问题然后使用Cloudinary SDK将其上载到Cloudinary。我们需要将其上载到服务器的原因是，还没有用于React Native的Cloudinary SDK，而Cloudinary上的此文档说明指定文件路径的文件选项仅适用于SDK：

我也没有成功地将其转换为base64，在上面的同一文档中，它说它将base64的上载大小限制为60 MB，因此我认为这无论如何都不是一个好的选择，因为SDK也可以使用分块上载

如果有可能先将其上传到服务器，然后再从服务器上传到Cloudinary，那么这里有几个关键部分：

反应本机应用程序：

const data = new FormData()
data.append('video-upload', {
  name: 'my-video-upload',
  type: 'video/mov',
  uri: localVideo //Refers to the video in the result of your ImagePicker
})
try {
  let response = await axios({
    method: 'post',
    url: Util.serverUrl + '/upload-video',
    data: data,
    headers: { 'Content-Type': 'multipart/form-data'}
  })
  console.log(response.data, 'Successfully uploaded video')
}
catch(err) {
  console.log(err.response.data, 'Failed uploading video')
}

服务器：

const cloudinary = require('cloudinary').v2
cloudinary.config({
    cloud_name: 'name',
    api_key: 'key',
    api_secret: 'secret',
})

//

const multer = require('multer')
const storage = multer.diskStorage({
    destination: 'api',
    filename: (req, file, cb) => {
        cb(null, file.fieldname + '_' + moment().unix() + '.mov')
    }
})
const upload = multer({ storage: storage })

//

app.post('/upload-video', upload.single('video-upload'), async (req, res, next) => {
    cloudinary.uploader.upload(__dirname + req.file.filename, {
    resource_type: 'video'
}, function (error, result) {
    console.log(error, 'This is the error')
    console.log(result, 'This is the result')
})

您需要了解multer和Cloudinary SDK for node.js，才能使其正常工作

---

如果您可以使用这种方式，我可以更详细地介绍。另一个可能的选项是首先将视频上载到s3，然后将s3位置指定给Cloudinary，作为文件类型选项之一。我没有尝试上载视频，但您可以查看其他关于从React Native将文件上载到s3的帖子.

这可以使用FileSystem.readAsStringAsync从前端轻松完成

FileSystem.readAsStringAsync(fileUri, { encoding: 'base64' })