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

Posted 2023-04-13

【中文标题】将视频 URI 从 React-Native Picker 上传到 AWS S3 服务器

【英文标题】：Upload Video URI from React-Native Picker to AWS S3 Server

【发布时间】：2021-09-21 16:19:21

【问题描述】：

我正在尝试使用 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 却不行？

【问题讨论】：

请告诉我，您是要将视频文件上传到 AWS 还是您的后端？当您使用 API 调用将文件发送到服务器时

我正在后端创建一个 s3.createPresignedPost url，将其发送回前端，然后尝试使用 createPresignedPost 通过 axios 将视频文件直接从前端上传到 s3。当我使用 react-native-camera 中的 uri 时，它可以完美运行，但它不喜欢 react-native-image-picker 中的 uri。 await axios.post(presignedPost.url) 函数直接上传到s3。

好的！但我们也可以在不调用 api 的情况下上传文件，但为此我们需要配置文件来初始化 aws 并将应用程序与 aws 连接，之后我们只需调用一个方法将文件上传到 aws

我没有关注你。你知道为什么选择器中的 uri 文件不起作用吗？

好的，让我深入研究一下。

【参考方案1】：

关注Tutorial for uploading video file试试看。

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

【讨论】：

是的。还是没有运气。

请检查更新后的答案我已对其进行了更改。

我试过了，仍然没有运气。我最终使用了一个不同的选择器包“react-native-image-crop-picker”，它返回了一个上传到服务器的 uri。感谢您的帮助