[XmlHttpRequest][react-native] xhr.upload.onprogress在使用xhr.send({uri: 'file:///...'})时无法工作

Question

我将尝试使用YouTube v3 API上传视频，参考此示例。

因此，我编写了以下代码：

var xhr = new XMLHttpRequest();
xhr.open('PUT', this.url, true);
xhr.setRequestHeader('Content-Type', this.contentType); <=== video/mp4
xhr.setRequestHeader('Content-Range', 'bytes ' + this.offset + '-' + (end - 1) + '/' + this.filesize);
xhr.setRequestHeader('X-Upload-Content-Type', this.filetype);  <=== video/mp4

if (xhr.upload) {
  xhr.upload.addEventListener('progress', this.onProgress);
}
xhr.onload = this.onContentUploadSuccess_.bind(this);
xhr.onerror = this.onContentUploadError_.bind(this);
xhr.send({uri: this.file.path});  <=== file:///.....

它可以工作，我用了 xhr.onload 和 xhr.onerror，视频文件已上传到YouTube并在那里播放。

但是我没有使用 xhr.upload.onprogress。

我试过了 xhr.onprogress、xhr.upload.onprogress 和 xhr.upload.addEventListener，但都不起作用。

但是！当我使用 FormData 时

let data = new FormData();
data.append('File', {
      uri:  source.path,
      type: source.type,
      name: source.name
});
var xhr = new XMLHttpRequest();
  xhr.open('PUT', this.url, true);
  //xhr.setRequestHeader('Content-Type', this.contentType);  
  //=== comment this, because it throw error 'multipart != video/mp4'
  //xhr.setRequestHeader('Content-Range', 'bytes ' + this.offset + '-' + (end - 1) + '/' + this.filesize);
  //=== comment this, because sending data size != filesize
  xhr.setRequestHeader('X-Upload-Content-Type', this.filetype);

  if (xhr.upload) {
    xhr.upload.addEventListener('progress', this.onProgress);
  }
  xhr.onload = this.onContentUploadSuccess_.bind(this);
  xhr.onerror = this.onContentUploadError_.bind(this);
  xhr.send(data); <==== FormData

xhr.upload.onprogress正在工作。但是Youtube API返回处理错误，因为它只支持'video/*'和'application/octet-stream'，不支持'multipart/form-data'。

我做错了什么？如果不使用FormData，我需要做什么才能使用xhr.upload.onprogress？

P.S. 对于我的糟糕英语感到抱歉

• React Native v0.47.2
• Node v8.2.1

• NPM v5.3.0

• 目标平台：Android

• 开发操作系统：MacOS
• 构建工具：Android SDK

- Video Orbita

Answer 1

这篇文章是些时候以前发布的，但可以试试这个：

const xhr = new XMLHttpRequest();
xhr.open('PUT', uploadUrl);
xhr.onLoad = this.onContentUploadSuccess_.bind(this);
xhr.onerror = this.onContentUploadError_.bind(this);
...formData here
xhr.send(formData);
if (xhr.upload) {
  xhr.upload.onprogress = ({ total, loaded }) => console.log(loaded / total);
}

将 xhr.upload.onprogress 放在最后解决了我的问题。请查看 Firefox 文档 以获取事件详细信息（如已加载，总计）。确保像我上面那样拆分总计和已加载。

- Fernando Rojo