Question

您好，我正在尝试使用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

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

Answer 1

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

multipart / form-data用于将MIME兼容表示形式的文件（例如图片和视频文件）以及相关的元数据上传到单个POST请求中。

'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),
  }],
);

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

1 个答案: