Реактивная загрузка видеофайлов - PullRequest
Новая
       16

Реактивная загрузка видеофайлов

0 голосов
/ 27 ноября 2018

В настоящее время я загружаю видео и изображения в кодировке base64, но настоятельно рекомендуется использовать альтернативу этому.Я использую RNFetchBlob для чтения закодированного файла и затем присоединяю его к SuperAgent для загрузки.Я видел несколько примеров использования FormData для прикрепления файла, но не могу найти полный рабочий пример.Если бы кто-то мог предоставить пример кода о том, как этого добиться, я был бы очень признателен. 

RNFetchBlob.fs.readFile(filePath, 'base64')
      .then((base64data) => {
          let base64Image = `data:video/mp4;base64,${base64data}`;

          let uploadRequest = superagent.post(uploadURL)
          uploadRequest.attach('file',base64Image)

          Object.keys(params).forEach((key) => {
            uploadRequest.field(key,params[key])
          })

          uploadRequest.on('progress', function(e) {
              this.props.setVideoUploadProgress(e.percent)
           }.bind(this))

      uploadRequest.end((err,resp) => {

      })
})

1 Ответ

0 голосов
/ 27 ноября 2018

Я использую react-native-image-picker, чтобы позволить пользователям выбирать или записывать видео, что дает мне URI пути к видеофайлу.Затем я использую RNFetchBlob, чтобы загрузить его на сервер. 

    RNFetchBlob.fetch('POST', 'Upload API endpoint', {
        ...this.getHeader(),
        'Content-Type': 'multipart/form-data'
        // Change BASE64 encoded data to a file path with prefix `RNFetchBlob-file://`.
        // Or simply wrap the file path with RNFetchBlob.wrap().
    }, [
            // element with property `filename` will be transformed into `file` in form data

            { name: 'file', filename: 'video.mp4', data: RNFetchBlob.wrap(this.state.videoUri) },
            // custom content type
        ]).uploadProgress({ interval: 250 }, (written, total) => {
            let uploaded = (written / total) * 100
            this.setState({
                uploadProgress: uploaded.toFixed(1)
            })
        })
        .then((response) => {
            if (response.ok) {
                this.setState({
                    uploading: false,
                    uploadSuccess: true,
                    uploadFailed: false,
                })
            }
        }).catch((err) => {
            this.setState({
                uploading: false,
                uploadSuccess: false,
                uploadFailed: true,
            })
        })
...