如何解决移动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)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。