鍍金池/ 問答/HTML5  HTML/ 上傳數據到服務器出現以下問題

上傳數據到服務器出現以下問題

上傳數據到服務器出現瀏覽器崩潰問題

上傳數據比較多,其中包括2到3個base64

相關代碼

  <Upload :show-upload-list="true" :headers="{'token':user}" 
  accept="application/pdf"
  multiple
  action="http://jsonplaceholder.typicode.com/posts/"
  :on-success="handleSuccess" 
  :before-upload="handleBeforeUpload">
  <Button type="ghost" icon="ios-cloud-upload-outline">文件上傳</Button>
  </Upload>
          
handleBeforeUpload(file) {
  var reader = new FileReader();
  reader.readAsDataURL(file);

  reader.onloadend = () => {
    this.upList.push(reader.result);
    this.$set(this.list, "value", this.upList);

    console.log(this.list);
  };

  return false;
},

數據保存成功,并且不是很慢

錯誤如下:

clipboard.png

回答
編輯回答
笑忘初

出現瀏覽器崩潰的原因是,你瀏覽器占用的內存爆倉了。你的reader.onloadend方法把base64的數據都存起來了,這里是存到內存當中,當數據量很大的情況下,就會出現內存爆倉,瀏覽器沒有額外的內存去正常運行了。
你需要限制一下上傳文件的大小,當文件過大的情況下,推薦采用 分片上傳技術,使用類似于js-spark-md5前端js類庫。參考html5大文件上傳技術

2018年1月31日 06:06