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

【问题标题】：Mobile Safari video upload makes site refresh移动Safari视频上传使网站刷新
【发布时间】：2020-08-13 18:36:27
【问题描述】：

我使用 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);

【问题讨论】：

标签： node.js angular raspberry-pi raspberry-pi3 adhoc

【解决方案1】：

以防万一有人遇到这种情况。我面临的问题是我正在缓存超过浏览器缓存限制的视频。为了避免缓存，我只是使用 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)
  }

【讨论】：