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
Menu