Paste and upload images in the form

JS 动作面板 - 前端代码开发 | 钉钉宜搭·帮助中心

本文档介绍了如何在宜搭中使用动作面板编写JS代码以实现业务逻辑或逻辑判断，包括代码输入、动作绑定、获取回调函数参数的方法。同时提供了API使用手册、调试JS代码的技巧以及引用第三方JS资源的安全建议。

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

This case comes from Feng Peng, a three-party developer 」

1. Usage scenarios

The function is only supported on the PC side.

In this example, let's learn how to paste and upload images in the YIDA form.

2. Implement functions

2.1. Page configuration

The mobile terminal does not support it, so we need to hide this component on the mobile terminal:

2.2. Copy the following code to Page JS

Called in didMount, the unique identifier is modified according to the actual situation.

/**
* 图片粘贴上传
* @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
}

3. Effect

4. Try it online

示例中心 | 开发者赋能平台

AI智能体时代，全新宜搭。业务创新，一搭就行。

https://www.aliwork.com/o/coc?tplUuid=TPL_NGD5O0OO2NCA80Y66OUJ&from=yuque_subject