フォーム/カスタムページで画像をトリミングしてアップロードします

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

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

このケースは、三者の開発者「馮鵬」から来たものです

1. 使用シーン

アップロードした画像をトリミングする必要がある場合は、この例を参照してください。

2.機能を実現する

ダイアログをカスタムページからフォームページにコピーする必要がある場合を除き、残りの操作フォーム/カスタムページは同じです。

2.1三者jsリソースとcssリソースの導入

this.utils.loadStyleSheet('https://g.alicdn.com/yida-platform/react-cropper/1.0.0/css/react-cropper.css');
this.utils.loadScript('https://g.alicdn.com/yida-platform/react-cropper/1.0.0/js/react-cropper.js');

2.2フォーム/カスタムページの設定

自動アップロードをオフにすることに注意してください。

2.3設定に使用する変数

2.4トリミング用のダイアログの設定

Jsxコンポーネント内のコードは次のとおりです

function render() {
  return(
    <window.ReactCropper
      ref={this.saveCropperrRef.bind(this)}
      src={this.state.src}
      style={{ height: 300, width: 400 }}
    />
  );
}

ダイアログのイベントバインディング:

Onokイベントコードは次のとおりです。

4行目の画像アップロードコンポーネントの一意のidと14行目のダイアログコンポーネントの一意のidを変更することに注意してください。

export function onOk() {
  const data = this.state.cropperRef.cropper.getCroppedCanvas().toDataURL();
  const file = dataURL2Blob2File(data, this.state.file);
  let uploaderRef = this.utils.isMobile() ? this.$('imageField_l9ozo0n1').uploaderRef.uploaderRef : this.$('imageField_l9ozo0n1').uploaderRef;
  console.log('file', file);
  if (uploaderRef.state.value) {
    uploaderRef.state.value.forEach(_file => {
      if (_file && _file.uid === file.uid) {
        _file.size = file.size;
      }
    });
  }
  uploaderRef.uploaderRef.startUpload([file]);
  this.$('dialog_kqby9wqe').hide();
}

2.5次のコードをページjsにコピーします

18行のダイアログコンポーネントを一意に識別することに注意してください。

export function onSuccess(file, value) {
  this.utils.toast({
    title: '上传成功'
  });
}

/**
* imageField onSelect
*/
export function onSelect(files) {
  console.log('onSelect');
  const reader = new FileReader();
  reader.onload = () => {
    this.setState({
      src: reader.result,
      file: files[0],
    });
    this.$('dialog_kqby9wqe').show();
  };
  reader.readAsDataURL(files[0].originFileObj);
}

/**
 * 图片剪切开始
 */
export function saveCropperrRef(ref) {
  this.setState({
    cropperRef: ref,
  });
}

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 to File
  // set lastModifiedDate and name
  blob.lastModifiedDate = new Date();
  blob.name = file.name;
  blob.uid = file.uid;
  return blob;
}