首页 文章

[xmlHttpRequest] [react-native] xhr.upload.onprogress无法使用xhr.send（{uri：'file:///…'}）

提问于
浏览 次
3

我正在尝试使用youtube v3 API上传视频，请查看this示例 .

所以，我写了这样的东西：

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' .

我做错了什么以及我需要做什么才能使用 xhr.upload.onprogress WITHOUT FormData ？

附：对不起我丑陋的英语

  • react-native v0.47.2

  • node v8.2.1

  • npm v5.3.0

  • 目标平台：Android

  • 开发操作系统：MacOS

  • 构建工具：Android SDK

android react-native youtube xmlhttprequest form-data

1 回答

  • 0

    这篇文章不久前，但试试这个：

    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 docs以获取事件详细信息（如已加载，总计） . 确保按照我上面的方式解构总数并降落 .

    回复于

相关问题