react-native实现视频上传功能

上传功能用到的是   react-native-background-upload 以及react-native-image-picker

通过  

 onPressUpload = (options) => {

    const imagePickerOptions = {

       mediaType:"video" //选择打开视频库

    }

  ImagePicker.launchImageLibrary(imagePickerOptions, (response) => {

      const { customButton, didCancel, error, path, uri } = response   //  返回的对象

      if (Platform.OS === 'android') {

        if (path) { // 视频的本地地址

          this.startUpload(Object.assign({ path }, options)) //选择视频后触发视频上传

        } else {

          return null;

        }

      } else {

        this.startUpload(Object.assign({ path: uri }, options))

      }

    })

  }


startUpload = (opts) => {

    Upload.getFileInfo(opts.path).then((metadata) => {

      const options = Object.assign({

        method: 'POST',

        headers: {

          'content-type': metadata.mimeType 

        }

      }, opts)

      Upload.startUpload(options).then((uploadId) => {

        this.setState({ uploadId, progress: 0 })

        Upload.addListener('progress', uploadId, (data) => {

          this.handleProgress(+data.progress)  //上传进度

        })

        Upload.addListener('completed', uploadId, (data) => {

          console.log('Completed!')  //上传完成

        })

      }).catch(function(err) {

        this.setState({ uploadId: null, progress: null })

        console.log('上传错误, err)

      })

    })

  }


cancelUpload = () => {    //取消视频上传
if (!this.state.uploadid) {
console.log('Nothing to cancel!')
return
}
Upload.cancelUpload(this.state.uploadId).then((props) => { 
     this.setState({ uploadId: null, progress: null })    //将视频进度以及视频ID更改为空  停止上传。
   })
}  

主要方法就是这些,还有一些细节和坑没有详细叙述了...

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容