Question

我正在尝试使用其v3 API和MediaUploader将视频文件上传到YouTube。它可以在我的ReactJS应用程序中工作，但不能在我的React Native应用程序中工作。通过React Native上传时，上传完成，然后停在100％。在我的YouTube帐户中，我可以看到新的视频文件，但是它停留在“视频仍在处理中”的位置。

我认为问题可能是我需要发送视频文件，而不是带有视频 uri 的对象，但是我不知道该如何解决。

我正在使用https://github.com/youtube/api-samples/blob/master/javascript/cors_upload.js处的CORS示例中的YouTube MediaUploader，我使用的是OAuth 2.0客户端ID，当通过我的网站使用ReactJS应用程序时，此设置可以正常使用。我正在使用带有相机的React Native Expo，它会返回一个带有URI的对象，例如：

视频文件：对象{ “ uri”：“文件：/// var / mobile / Containers / Data / Application / 353A7969-E2A8-4C80-B641-C80B2B029555 / Library / Caches / ExponentExperienceData /％2540dj_walksalot％252Fwandereo / Camera / E971DFEC-AB3E-4B6D-892F -9027AFE47A1A.mov”， }

可以在应用程序中查看该文件，我什至可以成功地将该文件发送到我的服务器以在Web应用程序和React Native应用程序中播放。但是，无法在MediaUploader中发送该对象。上传将花费适当的时间，但停留时间为100％，而我的YouTube帐户将显示它已接收到带有正确元数据的视频，但视频本身仍然停留在“视频仍在处理中”的位置。

video_file：对象{ “ uri”：“文件：/// var / mobile / Containers / Data / Application / 353A7969-E2A8-4C80-B641-C80B2B029555 / Library / Caches / ExponentExperienceData /％2540dj_walksalot％252Fwandereo / Camera / E971DFEC-AB3E-4B6D-892F -9027AFE47A1A.mov”， }

export const uploadToYouTube = (access_token, video_file, metadata) => async (dispatch) => {
...cors_upload...

var uploader = new MediaUploader({
baseUrl: `https://www.googleapis.com/upload/youtube/v3/videos?part=snippet%2Cstatus&key=API_KEY`,
file: video_file,
token: access_token,
metadata: metadata,
contentType: 'video/quicktime', 
// contentType: 'application/octet-stream',//"video/*",
// contentType = options.contentType || this.file.type || 'application/octet-stream';
params: {
   part: Object.keys(metadata).join(',')
},

onError: function(data) {
  // onError code
  let err = JSON.parse(data);
  dispatch(returnErrors(err.message, err.code))
  console.log('Error: ', err);
},

onProgress: function(progressEvent){
  // onProgress code
  let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
  dispatch({
    type: UPLOAD_PROGRESS,
    payload: percentCompleted
  });
},

onComplete: function(data) {
  console.log('Complete');
   // onComplete code
  let responseData = JSON.parse(data);
  dispatch({
    type: UPLOAD_YOUTUBE_VIDEO,
    payload: JSON.parse(data)
  })
  dispatch({
    type: UPLOAD_PROGRESS,
    payload: 0
  });
}

}）;

uploader.upload（）; }

类似于我当前正在使用的网络应用程序，完成上传后，应触发“ onComplete”功能，YouTube应处理该视频。这不会发生。我相信是因为我要附加一个带有URI而不是实际文件的对象。

Answer 1

我能够从https://www.expertmill.com/2018/10/19/using-and-uploading-dynamically-created-local-files-in-react-native-and-expo/的乔·埃德加（Joe Edgar）在Expert Mill的帖子中解决此问题

通过使用fetch和.blob（），我能够将URI对象转换为数据对象并上传。附加代码：

常量文件=等待提取（video_file.uri）; const file_blob =等待file.blob（）;

不需要安装RNFetchBlob，因为它在Expo SDK中。

反应将本机上传视频上传到YouTube（停留在处理中）

1 个答案: