怎么在weui的uploader插入一个压缩图片的方法？

Question

1. 用的不是jquery.weui；
2. 只是想插入一个压缩图片的方法。
3. 插件地址：https://cipchk.github.io/ngx-...

  uploader: Uploader = new Uploader(<UploaderOptions>{
    url: this.imgUploadUrl,  // 服务端网址
    method: 'POST', // 上传方式
    alias: 'demo[]',  // ————修改的是Headers里的Request Payload中的name值————
    auto: true,  // 是否自动上传
    limit: 1, // 限制上传数量，默认为-1，不限制
    removeAfterUpload: true, // 是否自动移除上传成功文件
    size: 1048576, // 限定文件大小（单位：字节），-1 表示不受限

    params: {     // ********外面定义的全局变量一定要在这里重新定义赋值********
      imgAtt : this.imgAtt,
      shareService: this.sharedService
    },
    isUploading: false,

    onFileQueued: function () {  // 当文件被加入队列以后触发
      console.log('onFileQueued: ', arguments);
    },
    onFileDequeued: function () {  // 当文件被移除队列后触发
      console.log('onFileDequeued', arguments);
    },
    onStart: (res) => {  // 当开始上传流程时触发
      this.sharedService.Loading('上传中...');
    },
    onCancel: function () {  // 当开始上传流程取消时触发
      this.isUploading = false;
      console.log('onCancel', arguments);
    },
    onFinished: function () {  // 当所有文件上传结束时触发
    },
    onUploadStart: function () {  // 某个文件开始上传前触发，一个文件只会触发一次
    },
    onUploadProgress: function () {  // 上传过程中触发，携带总的上传进度，以及当前文件的上传进度
    },
    onUploadSuccess: function () {  // 当文件上传成功时触发
      const imgInfo = JSON.parse(arguments[1]);
      this.params.imgAtt.push(imgInfo);  // 将获取到的信息，一条一条压入
      console.log('onUploadSuccess', arguments);

      this.punchSuccess();
    },
    onUploadError: function () {  // 当文件上传出错时触发
      console.log('onUploadError', arguments);
    },
    onUploadComplete: function () {  // 不管成功或者失败，文件上传完成时触发
      this.isUploading = false;
    },
    onUploadCancel: function () {  // 取消某文件时触发
      console.log('onUploadCancel', arguments);
    },
    onError: function () {  // 当filters不通过时触发
      console.log('onError', arguments);
    },
    punchSuccess: () => {
      this.uploadSuccess(); // 上传成功后的操作
    }
  });

这个插件，一旦点击了input的选中图片后就会到上传队列去。
难道要调用方法把其队列中的文件取出压缩后再放回去？

getReadyItems    获取待上传文件
addToQueue    将文件放入队列中

Answer 1

插入不了，难受！本身的weui的uploader就有压缩的代码的，结果，这个封装之后，这个就没了，仅仅有个限制。

后来的操作，把自动上传给false掉。然后在input标签中加入一个(change)事件，里面带着压缩照片的方法和自己上传的方法。

<!-- 想要直接调用相机，就去掉 multiple 属性 -->
    <input type="file" class="btn btn-brand-color" id="uploadOriginalPicture" accept="image/*" multiple name="demo[]" [weui-uploader-file]="Uploader" style="display: none;" (change)="compress()" />

// 关闭ngx-weui的uploader插件自动上传
auto: false,  // 是否自动上传

// 压缩方法
  /**
   * 把图片转换成base64格式
   **/
  compress() {
    // angular获取input文件比较麻烦，所以就这样直接利用uploader获取了 
    const fileObj = this.Uploader.queue[0]._file;
    const url = this.imgUploadUrl; // 接收上传文件的后台地址
    const form = new FormData(); // FormData 对象

    // 大于1M，进行压缩上传
    if (fileObj.size / 1024 > 1025) {
      const reader = new FileReader();
      reader.readAsDataURL(fileObj);
      reader.onload = (e) => {
        // console.log((<FileReader>e.target).result); // 这里的e.target.result就是转换后base64格式的图片文件
        const image = new Image(); // 新建一个img标签（还没嵌入DOM节点)
        image.src = (<FileReader>e.target).result;
        image.onload = () => {
          const canvas = document.createElement('canvas'),
            context = canvas.getContext('2d'),
            imageWidth = image.width / 2.5,    // 压缩后图片的大小
            imageHeight = image.height / 2.5;

          let data = '';
          canvas.width = imageWidth;
          canvas.height = imageHeight;

          context.drawImage(image, 0, 0, imageWidth, imageHeight);
          data = canvas.toDataURL('image/jpeg');
          const bl = this.convertBase64UrlToBlob(data);

          form.append('demo[]', bl, 'file_' + Date.parse(new Date().toString()) + '.jpg'); // 文件对象
          this.xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
          this.xhr.open('post', url, true); // post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
          this.xhr.onload = (evt) => {  // 开始上传
            if (evt.target.status === 200) {
              // 服务端接收完文件返回的结果
              const dataDATA = JSON.parse(evt.target.responseText);
              this.imgAtt.push(dataDATA);
            }
          }; // 请求完成
          this.xhr.onerror = () => {
            this.sharedService.alert('错误', '上传失败！', '好的', () => {
              window.location.reload();
            });
          }; // 请求失败

          this.xhr.send(form); // 开始上传，发送form数据
        };
      };
    }else { // 小于等于1M 原图上传
      form.append('demo[]', fileObj); // 文件对象
      this.xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
      this.xhr.open('post', url, true); // post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
      this.xhr.onload = (evt) => {  // 开始上传
        if (evt.target.status === 200) {
          // 服务端接收完文件返回的结果
          const dataDATA = JSON.parse(evt.target.responseText);
          this.imgAtt.push(dataDATA);
        }
      }; // 请求完成
      this.xhr.onerror = () => {
        this.sharedService.alert('错误', '上传失败！', '好的', () => {
          window.location.reload();
        });
      }; // 请求失败

      this.xhr.send(form); // 开始上传，发送form数据
    }

  }

  /**
   * 将以base64的图片url数据转换为Blob/File
   * @param urlData
   * 用url方式表示的base64图片数据
   */
  convertBase64UrlToBlob(urlData) {
    const arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while ( n --) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    // 转换成file对象
    const fl =  new File([u8arr], 'test', {type: mime});
    // 转换成blob对象
    const bl = new Blob([u8arr], {type: mime});
    console.log('压缩过后的图片文件blob： ' + bl.size + ' ---- ' + fl.size);
    return new Blob([u8arr], {type: mime});
  }