フォーム中の画像貼り付けアップロード

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

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

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

1. 使用シーン

機能はpc側でのみサポートされています。

この例では、適切なフォームで画像貼り付けアップロードを実現する方法を学びます。

2. 機能を実現する

2.1. ページ設定

モバイル端末はサポートされていないので、このコンポーネントをモバイル端末で非表示にします

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

Didmountで呼び出され、実際の変更に基づいて一意に識別されます。

/**
* 图片粘贴上传
* @param uploaderFieldId: {String} 图片上传组件的唯一标识
* @param pasteFieldId: {String} 用于粘贴上传文本组件的唯一标识
*/
export function initPasteUpload(uploaderFieldId = '', pasteFieldId = '') {
  if (this.utils.isMobile()) {
    // 移动端不可用
    return;
  }
  setTimeout(() => {
    // 解决部分情况获取不到 uploaderRef 
    const uploaderRef = this.$(uploaderFieldId).uploaderRef;
    document.getElementById(pasteFieldId).addEventListener('paste', (e) => {
      e.preventDefault();
      const files = e.clipboardData.files;
      files.length && uploaderRef.selectFiles(files);
    });
  }, 500);
}

export function didMount() {
  this.initPasteUpload('imageField_l6bk9xbq', 'textField_leo2asf8'); // 图片上传 1
  this.initPasteUpload('imageField_lnl4m7sh', 'textField_lnl4m7si'); // 图片上传 2
}