The following problems occurred when uploading data to the server

browser crash occurred when uploading data to the server

upload more data, including 2 to 3 base64

related codes

  <Upload :show-upload-list="true" :headers="{"token":user}" 
  accept="application/pdf"
  multiple
  action="//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;
},

the data is saved successfully and is not very slow

errors are as follows:

clipboard.png

May.23,2021

the reason for the browser crash is that the memory occupied by your browser is out of stock. Your reader.onloadend method stores all the base64 data. Here, it is stored in memory. When there is a large amount of data, there will be a memory burst, and the browser has no extra memory to run normally.
you need to limit the size of the uploaded file. When the file is too large, it is recommended to use multipart upload technology , similar to the js-spark-md5 front-end js class library. Refer to html5 large file upload technology

Menu