时间戳

首页 > 解决方案 > 使用 rn-fetch-blob react native 将视频上传到服务器

react-native - 使用 rn-fetch-blob react native 将视频上传到服务器

问题描述

您好，我正在尝试使用 rn-fetch-blob 将视频上传到服务器。这是我的代码。

 var tempParam = 
    [{
      name: 'video', filename: 'vid.mp4', data: RNFetchBlob.wrap(videoUri.uri), type:'video/mp4'
    },
    {
      name:'user_id',data:'1060'
    }]

    console.log(JSON.stringify(tempParam))

    RNFetchBlob.fetch('POST', url, {
      'Content-Type' : 'application/octet-stream',
    },tempParam)
    .uploadProgress((written, total) => {
      var perc = ((((written / total)*100).toFixed(2))*1) +  "%" 
      console.log('uploaded', perc)

      Platform.OS === 'android' 
      ?  ToastAndroid.show('Uploaded..'+perc.toString(), ToastAndroid.SHORT)
      : Alert.alert('Uploaded..'+perc.toString())
    })
    .then((response) => response.json())
    .then((responseJson) => {
      if(!responseJson.error){
        this.setState({loading_status:false})

                    Platform.OS === 'android' 
                  ?  ToastAndroid.show('Video added successfully', ToastAndroid.SHORT)
                  : Alert.alert('Video added successfully')

                }
                else{

                  Platform.OS === 'android' 
                  ? ToastAndroid.show(responseJson.message, ToastAndroid.SHORT)
                  : Alert.alert(responseJson.message)
                }
    })
    .catch((err) => {
      this.setState({loading_status:false})
      Platform.OS === 'android' 
                            ?   ToastAndroid.show("Try Again", ToastAndroid.SHORT)
                            : Alert.alert("Try Again !")
      console.log(err);
    })

其中 videoUri.uri 是取自视频的 uri

react-native-image-picker

在上传视频的某些部分后上传视频期间，这会引发错误

stream was reset: PROTOCOL_ERROR

我该如何解决这个问题？请帮帮我

标签： react-nativereact-native-androidreact-native-ios

解决方案

从 application/json 到 multipart/form-data 的 POST 请求的内容类型

multipart/form-data 用于通过单个 POST 请求上传 MIME 兼容表示的文件，例如图片和视频文件，以及相关元数据。

'Content-Type' : 'multipart/form-data'

查看我的工作示例

export const uploadVideo = file => RNFetchBlob.fetch(
  'POST',
   url,
  {
    'Content-Type': 'multipart/form-data',
  },
  [{
    type: 'video/mp4',
    name: 'file',
    filename: 'vid.mp4',
    data: RNFetchBlob.wrap(file.uri),
  }],
);

推荐阅读