表单中图片上传并压缩

能力免费版轻享版专业版专属版页面JS代码不支持不支持支持支持1. 功能概述用户可以通过宜搭中的「动作面板」去写 JS 代码，从而实现自己的业务逻辑或逻辑判断。通过动作面板，您可以「更加方便的组织和复用代码」、「实现复杂交互」。JS 面板注意：通过JS面板编写的逻辑一般情况下是不会对历史数据生效...

https://docs.aliwork.com/docs/yida_support/lbtl0t/ocmxyv

本案例来自三方开发者「页一」

1. 使用场景

当我们上传的图片很大时，且需要进行一定的压缩以达到节约宜搭附件容量的情况下，可参考本例。

2. 实现功能

2.1 引入JS资源并关闭上传图片组件的自动上传

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
  // 关闭自动上传，需要压缩图片的图片上传组件都需要关闭自动上传
  this.$('imageField_l7zmi4nk').set('autoUpload', false); // 图片压缩One
  this.$('imageField_lhg0ipwp').set('autoUpload', false); // 图片压缩Two
  this.utils.loadScript('https://g.alicdn.com/code/lib/compressorjs/1.1.1/compressor.min.js'); // 资源引入，无需修改
}

2.2 配置表单页面

2.3 将下面代码拷贝至页面JS中

// 图片压缩One
export function onSelectFileOne(files) {
  this.poptoastLoading('图片压缩中', 100);
  this.imgCompressor('imageField_l7zmi4nk', files);
}

// 图片压缩Two
export function onSelectFileTwo(files) {
  this.poptoastLoading('图片压缩中', 100);
  this.imgCompressor('imageField_lhg0ipwp', files);
}

// 下述代码都不需要修改
export function onImgSuccess() {
  this.onCloseLoading();
};

export function imgCompressor(selectedField = '', files = []) {
  const selectedFD = this.$(selectedField);
  const selectedType = this.$(selectedField).get("type");
  const isMobile = this.utils.isMobile()
  files.forEach(fileItem => {
    const reader = new FileReader();
    reader.onload = () => {
      const file = dataURL2Blob2File(reader.result, fileItem);
      if (!file) {
        return;
      }
      new Compressor(file, {
        quality: 0.2,  // 压缩率，想修改要锁比例，只要修改这个参数即可
        maxWidth: 1800, // 最大宽度
        maxHeight: 1400,// 最大高度
        mimeType: 'image/jpeg',
        success(result) {
          const formData = new FormData();
          result.lastModifiedDate = new Date();
          result.name = fileItem.name;
          result.uid = fileItem.uid;
          let uploaderRef = null;
          if (selectedType === "drag") {
            uploaderRef = selectedFD.uploaderRef.uploaderRef;
          } else {
            uploaderRef = isMobile ? selectedFD.uploaderRef.uploaderRef : selectedFD.uploaderRef;
          }
          if (uploaderRef.state.value) {
            uploaderRef.state.value.forEach(_file => {
              if (_file && _file.uid === file.uid) {
                _file.size = result.size;
              }
            });
          }
          uploaderRef.uploaderRef.startUpload([result]);
        },
        error(err) {
          selectedFD.setValue({});
          console.log(err.message);
        },
      });
    };
    reader.readAsDataURL(fileItem.originFileObj);
  })
};

function dataURL2Blob2File(dataURL, file) {
  const arr = dataURL.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    u8arr = new Uint8Array(bstr.length);
  let n = bstr.length;
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  const blob = new Blob([u8arr], { type: mime });
  blob.lastModifiedDate = new Date();
  blob.name = file.name;
  blob.uid = file.uid;
  return blob;
}

let closeLoading;
export function poptoastLoading(title_str, s) {
  closeLoading = this.utils.toast({
    title: title_str,
    type: 'loading',
    size: "large"
  });
  if (s != 0) {
    setTimeout(() => {
      this.onCloseLoading();
    }, s * 1000);
  }
};

export function onCloseLoading() {
  if (closeLoading) {
    closeLoading();
  }
};