钉钉端身份证图片上传优化方案（拟）

[wisetc]

1. 用户选择完图片后，提示原图片的真实大小。
2. 限制原图片不能超过10M，如果超过10M，则限制该图片上传，并提示“图片不能上传，因为图片大小不能超过10M”类似的提示语。
3. 如果有可能，可以提示用户将大小超过10M的图片自行压缩的办法，该方法需要于用户易于操作。
4. 低于10M（并大于2M）的图片，程序自动将原图片大小压缩至2M以内（依赖可靠的图片压缩模块），然后将压缩过的图片上传，以缩短图片上传时间，节约带宽，优化用户使用体验。
5. 普通低于2M的图片，上传原图片。
6. 当图片的大小低于10K时，禁止上传，并提示用户，“该图片非正常图片，请确认后再重新上传”。
7. 图片上传至服务器的名称分端放置于端的子目录，例如钉钉端为 'dingtalk/images/sdk/'，便于图片管理者归类查找。

上述优化项开发时间1天，体验效果及测试时间1天，确认无误立即发布。

最终，图片压缩模块，从browser-image-compression和compressorjs中，选择了前者，browser-image-compression版本为0.0.3。

[wisetc]

class IdcardUploader extends Component {
  // ...
  minKB = 10;
  maxMB = 8;
  normalMB = 2;

  async handleChange(e) {
    const files = e.target.files;
    if (!files.length) return;

    const file = files[0];

    const reader = new FileReader();
    reader.onload = (function(aImg) {
      return function(e) {
        aImg.src = e.target.result;
      };
    })(this.previewEl);
    console.log({ file });
    const fileSize = file.size;
    this.setState({
      fileSize,
    });

    if (fileSize > this.maxMB * oneMB) {
      feedback.error(
        `您上传的图片的体积大于 ${this.maxMB}M，无法为您上传该图片`,
        () => {
          this.setState({
            fileSize: null,
          });
          console.log('uploader canceled - file to large.');
        }
      );
      return;
    } else if (fileSize < this.minKB * oneKB) {
      feedback.error(`该图片非正常图片，请确认后再重新选择`, () => {
        this.setState({
          fileSize: null,
        });
        console.log('uploader canceled - file to small.');
      });
      return;
    }

    let compressedFile = file;
    const closeLoading = feedback.loading();
    if (fileSize > this.normalMB * oneMB) {
      try {
        compressedFile = await imageCompression(file, this.normalMB); // maxSizeMB, maxWidthOrHeight are optional
        console.log(
          `compressedFile size ${compressedFile.size / 1024 / 1024} MB`
        ); // smaller than maxSizeMB
      } catch (error) {
        console.log(error);
      }
    }

    uploadFileList([compressedFile])
      .then(res => {
        reader.readAsDataURL(compressedFile);
        typeof this.props.uploadSuccess === 'function' &&
          this.props.uploadSuccess(res.map(item => item.url), this.props.type);
      })
      .finally(() => {
        closeLoading();
      });
  }
  // ...
}

[wisetc]

修改

4, 5, 2M改0.8M。

补充，

• 检查是否支持 HTML5 canvas 压缩，如果不支持提示之，并且上传原图。
• OSS 上传时间过长提示，用户耐心等待或者是否修改过系统时间。