移动Safari视频上传使网站刷新

问题描述

我使用Angular和Node.Js和multer在树莓派上创建了一个照片上传服务器。所有这些都托管在pi本身创建的不安全的ad-hoc网络上。我之所以临时参加此会议，是因为我希望能够在旅途中进行拍摄并在任何地方都可以存储照片。当我使用iPhone上的任何移动浏览器上载超过15秒的视频或选择大量照片时，它会停顿一秒钟，然后刷新页面以停止上载。至于错误消息，我在台式机或移动设备上看不到任何错误消息，因为页面重新调谐器显示“显示网页时出现问题”，是否可以增加multers文件大小限制？ Safari iOS refresh

要上传的HTML：

<div class="dropzone">
<input type="file" #fileDropRef id="fileDropRef" multiple (change)="handleDrop($event)">
<img src="../../assets/upload.png">
<p>Drag and drop here</p>
<p>or</p>
<p>browes for file</p>
</div>
<div id="progressBar" #progressBar></div>
<div id="photoAlbum" #photoAlbum></div>
<div id="gallery" #gallery></div>

并处理上传

handleDrop(e) {
  e.preventDefault()
  e.stopPropagation()
  console.log(e)

  this.handleFiles(e.target.files)
}

initializeProgress(numFiles) {
  this.progressBar.nativeElement.value = 0
  this.uploadProgress = []

  for(let i = numFiles; i > 0; i--) {
    this.uploadProgress.push(0)
  }
}

handleFiles(files) {
  files = [...files]
  this.initializeProgress(files.length)
  files.forEach(this.uploadFile)
  files.forEach(this.previewFile)
}

uploadFile(file,i) {
  var formData = new FormData();

  formData.append("photos",file);
  formData.append("photos",localStorage.getItem('email'));
  
  var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
  var blob = new Blob([content],{ type: "text/xml"});

  var request = new XMLHttpRequest();
  request.onreadystatechange = function() {
  if (request.readyState == XMLHttpRequest.DONE) {
      console.log(request.responseText);
  }
}
  request.open("POST",'http://localhost:port/api/mov/uploadmedia');
  request.send(formData);

解决方法

万一有人碰到这个。我面临的问题是我正在缓存超出浏览器缓存限制的视频。为了避免缓存，我仅使用XMLHttpRequest在选择文件后立即上传文件。这样会将文件直接流式传输到磁盘。

  counter(e) {
    if(this.i != e.target.files.length){
      this.i++;
      this.handleDrop(e)
    }
  }
  handleDrop(e) {
    e.preventDefault()
    e.stopPropagation()
    console.log(e)

    var formData = new FormData();

    formData.append("photos",e.target.files[this.i]);

    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if(request.readyState == XMLHttpRequest.DONE) {
        console.log(request.responseText)
    }
    }
    request.open("POST",'http://localhost:port/api/mov/uploadmedia')
    request.send(formData)
    this.counter(e)
  }