将视频 URI 从 React-Native Picker 上传到 AWS S3 服务器

Question

我正在尝试使用 axios 和预签名 URL 将视频从我的 IOS 设备库上传到 S3。我已经确定 axios/s3 部分运行良好，但问题来自我从“react-native-image-picker”收到的 uri。

当我在 react-native 中录制视频时，视频 uri 在 S3 中可以正常上传，但是当我从照片库中抓取视频时，它会上传到 S3，但它不是视频文件。

我使用 react-native-image-picker 从我的 ios 设备库中获取视频 uri。

import {launchImageLibrary} from 'react-native-image-picker';

launchImageLibrary({mediaType: "video"}, ({assets}) => {
        let {uri} = assets[0] //uri = /var/mobile/Containers/Data/Application/123/tmp/IMG_1779.mov
        uploadFile(uri)
      });

然后我尝试将 uri 上传到 S3

//save to s3 using presignedPost
uploadFile(uri){
        var formData = new FormData();
        ...
        formData.append("file", { uri });
        await axios.post(presignedPost.url, formData,{ 'Content-Type': 'multipart/form-data' } )
}

函数成功了，但是当我在AWS中查看时，文件只是一个带有一堆随机字符的文本文件。

好消息是，如果我使用 react-native-camera 录制视频，同样的 uploadFile 函数也可以工作

import { RNCamera } from 'react-native-camera';

stopRecord(){
   let camera = cameraRef.current //grab camera <RNCamera ref={cameraRef} />
   let {uri = null} = await camera.recordAsync(); //uri = /var/mobile/Containers/Data/Application/123/Library/Caches/Camera/123.mov
   uploadFile(uri)
}

我能看到的唯一区别是录制视频后的 uri 存储在缓存中。因此，我尝试使用“react-native-fs”来获取选择器 uri，将其保存到缓存，然后上传缓存的文件，但我遇到了同样的错误（文件上传到 s3 但不是视频）。

import * as RNFS from 'react-native-fs';

uploadFileTwo(uri){
   let base64Data = await RNFS.readFile(uri, 'base64')
   let cachePath = RNFS.CachesDirectoryPath + "/" + fileName + ".mov"
   await RNFS.writeFile(cachePath, base64Data, 'base64')
   
   var formData = new FormData(); 
   ...
   formData.append("file", { uri: cachePath });
   await axios.post(presignedPost.url, formData,{ 'Content-Type': 'multipart/form-data' } )
}

所以现在我别无选择。为什么'react-native-camera' uri 可以很好地工作，但 'react-native-image-picker' uri 却不行？

Answer 1

关注Tutorial for uploading video file试试看。

我认为本教程满足您的所有要求，因为它使用 react-native-image-picker 上传视频文件。