从移动设备和网络将视频发布到 cloudinary - React-Native-EXPO

Question

我正在尝试从移动设备和网络将图像和视频发布到cloudinary，并获取返回的URL，之后我可以使用它。然而，图像的功能工作正常，但视频的功能， cloudinary 在移动设备上返回未定义，并在网络上显示错误请求错误。

如果有人能解决这个问题，请告诉我。我想要世博会上的解决方案。

我使用的是expo版本49。

const pickVideo = async () => {
        try {
            let result = await ImagePicker.launchImageLibraryAsync({
                mediaTypes: ImagePicker.MediaTypeOptions.Videos,
                allowsEditing: true,
                quality: 1,
            });

            if (!result.canceled) {
                let imageUri = result.assets[0].uri.split(',')[1];
                // let extension = await getImageType(imageUri)
                // console.log(result)
                let data = {
                    uri: imageUri,
                    name: 'video',
                    type: 'video/mp4'
                }

                const uri = await postToCloundinaryVideo(imageUri)
                console.log('hello')
                console.log(uri)
            }
        } catch (err) {
            console.log(err)
        }
    }

const postToCloundinaryVideo = (file: string | Blob) => {
    return new Promise((resolve, reject)=>{

      let videoUri 
      console.log(file)

      const data = new FormData()
      data.append("file",file)
      data.append("upload_preset","my_value")
      data.append("cloud_name","my_cloud_name")

      fetch("https://api.cloudinary.com/v1_1/my_cloud_name/video/upload",{
         method:"post",
         body:data
      })
      .then(res=>res.json())
      .then(data=>{
        videoUri = data.url
         console.log(videoUri)
         return resolve(videoUri)
      })
      .catch(err=>{
         return reject(err)
      })    
    // return 'hello'
    })
 }

这是我从设备中选择视频并上传到cloudinary的功能。

Answer 1

我认为问题在于您尝试在代码的某些部分上传图像而不是视频。试试这个：

const pickVideo = async () => {
  try {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Videos,
      allowsEditing: true,
      quality: 1,
    });

    if (!result.canceled) {
      const videoUri = await postToCloudinaryVideo(result);
      console.log(videoUri);
    }
  } catch (err) {
    console.log(err);
  }
}

const postToCloudinaryVideo = async (result) => {
  try {
    const data = new FormData();
    data.append("file", {
      uri: result.uri,
      type: 'video/mp4',
      name: 'video.mp4',
    });
    data.append("upload_preset", "your_upload_preset"); // replace with your actual upload preset
    data.append("cloud_name", "your_cloud_name"); // replace with your actual cloud name

    const response = await fetch("https://api.cloudinary.com/v1_1/your_cloud_name/video/upload", {
      method: "post",
      body: data,
    });

    const responseData = await response.json();

    return responseData.secure_url; // or responseData.url depending on your requirements
  } catch (error) {
    console.error("Error uploading video to Cloudinary:", error);
    throw error;
  }
}