How to asynchronously compress a picture when uploading multiple images in vue?

I am using vux+cordova for development.

you need to select pictures from the album, make thumbnails with base64 on the phone, compress them with canvas, and upload them in the form of blob.
the code is as follows:

reader.onloadstart = function() {
            
          };
reader.onprogress = function(e) {
            
          };
reader.onload = function(e) {
            

            var src = e.target.result;

            let data;
            var img = new Image();
            img.src = src;

            img.onload = function() {
              if (src.length <= 100 * 1024) {
                data = src;
              } else {
                data = self.compress(img);
              }

              uploader_file.setAttribute(
                "style",
                `background-image:url(${src})`
              );
              self.filesArr.push(self.dataURItoBlob(data));
            };
          };
          reader.readAsDataURL(file);
        }
      });
      
      
:
Apr.01,2021
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bf5eb8-31fa2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bf5eb8-31fa2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?