首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >将视频URI从React-Native Picker上传到亚马逊S3服务器

将视频URI从React-Native Picker上传到亚马逊S3服务器
EN

Stack Overflow用户
提问于 2021-07-12 21:40:05
回答 1查看 317关注 0票数 0

我正在尝试使用axios和一个预先签名的url将视频从我的IOS设备库上传到S3。我已经确定axios/s3部分工作得很好,但问题来自于我从'react-native-image-picker‘收到的uri。

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

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

代码语言:javascript
复制
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。

代码语言:javascript
复制
//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函数也能正常工作

代码语言:javascript
复制
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,而不是视频)。

代码语言:javascript
复制
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就不行了?

EN

回答 1

Stack Overflow用户

发布于 2021-07-12 22:19:50

请按照Tutorial for uploading video file进行尝试。

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68348383

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档