React Native 视频文件上传答案

【问题标题】：React Native video file uploadReact Native 视频文件上传
【发布时间】：2019-04-28 19:05:36
【问题描述】：

我目前正在使用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) => {

      })
})

【问题讨论】：

是否有必要使用 base64 编码？我可以向您展示将视频和图像上传到云并将视频网址和图像网址附加到数据库的其他替代方法。这只是一个建议。如果你想要我的替代品，请发表评论！
我宁愿完全避免使用 base64 编码，但我只是不确定如何实现这一点。我已经读过，在使用 react native 时不建议使用字节数组进行上传，所以我只是不确定我的替代方案是什么。谢谢。

标签： react-native image-uploading superagent

【解决方案1】：

我正在使用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,
            })
        })

【讨论】：

感谢您的回复。我刚刚对此进行了测试，它与 base64 编码上传的文件大小完全相同，这对我来说没有意义，因为我认为 base64 编码将文件大小增加到 33%。此外，由于某种原因，uploadProgress 对我来说无法正常工作。
@John 除了 formdata 或 RNFetchBlob 之外，还有其他方法可以上传视频文件吗？我们的服务器不支持这个并且需要二进制文件。
您也可以使用 RNFetchBlob 上传二进制文件。正如名字本身所说的 BLOB

【解决方案2】：

基本上，您必须提供图像、音频或视频的路径才能获取 blob。以下代码对我有用：

RNFetchBlob.fetch(
  'POST',
  `${BASE_URL}vehicle/vehicleRegistration`,
  {
    Authorization: 'Bearer ' + authToken,
    'Content-Type': 'multipart/form-data,octet-stream',
  },
  [
    {
      name: 'photo',
      filename: 'vid.mp4',
      data: RNFetchBlob.wrap(vehicleImage.uri),
    },
    {
      name: 'email',
      data: user.email,
    },
    {
      name: 'userId',
      data: user.id,
    },
    {
      name: 'vehicleType',
      data: values.vehicleType,
    },
    {
      name: 'make',
      data: values.make,
    },
    {
      name: 'buildYear',
      data: values.buildYear,
    },
    {
      name: 'model',
      data: values.model,
    },
    {
      name: 'nickName',
      data: values.nickName,
    },
    {
      name: 'engineSize',
      data: values.engineSize,
    },
  ],
)
  .uploadProgress((written, total) => {
    console.log('uploaded', written / total);
  })
  .then(response => response.json())
  .then(RetrivedData => {
    console.log('---retrieved data------', RetrivedData);
    Toast.show({
      text1: 'Success',
      text2: 'Vehicle Added to Garage!',
      type: 'success',
    });
  })
  .catch(err => {
    console.log('----Error in adding a comment----', err);
    Toast.show({
      text1: 'Request Failed',
      text2: err?.response?.data?.message,
      type: 'error',
    });
  });

【讨论】：