怎样在自定义页面中获取表单（主表）上传的多张图片，A数据传了2张，b一张，用下标获取报错，怎样解决？

远程数据源调用钉钉三方连接器时serviceInfo如下

const serviceInfo = JSON.stringify(
  {
    "connectorInfo": {
      "connectorId": "G-CONN-10161C143F2C0B01B8D00004", // 钉钉三方连接器唯一id
      "actionId": "G-ACT-1015BF7DBC1A0B01B8D0000C", // 钉钉三方连接器的动作id
      "type": "thirdConnector", // 钉钉三方连接器类型，thirdConnector
    }


    }
);

远程数据源调用钉钉官方连接器(也称为钉钉一方连接器)时serviceInfo如下

const serviceInfo = JSON.stringify(
  {
    "connectorInfo": {
      "connectorId": "G-CONN-10161C143F2C0B01B8D00004", // 钉钉官方连接器唯一id
      "actionId": "G-ACT-1015BF7DBC1A0B01B8D0000C", // 钉钉官方连接器的动作id
      "type": "innerConnector", // 钉钉官方连接器类型，innerConnector
    }
    }
);

可以参考一下自定义页面中图片裁剪后上传。
可以通过宜搭提供的upload控件来实现表单上传多张图片的功能

楼主你好，在自定义页面中，可以通过宜搭提供的upload控件来实现表单上传多张图片的功能。如果A数据传了2张图片，B数据传了1张图片，可以通过以下方式获取上传的图片：

// 假设表单中的图片字段为 "picture"
let pictures = [];  // 存储所有上传的图片

$w("#picture").value.forEach(function(file) {
  pictures.push(file.url);
});

// pictures 数组中将包含所有上传的图片链接

在这里，我们使用 value 属性来获取上传的文件列表。它返回一个数组，其中每个元素都是一个文件对象，包含文件名、大小、类型等信息。通过遍历该数组并使用 url 属性获取每个文件的链接，我们就可以获取所有上传的图片链接。

如果使用下标获取时出现错误，可以考虑使用 forEach() 方法进行遍历操作，以避免出现越界或其他异常情况。

可以参考一下自定义页面中图片裁剪后上传。

引入三方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');

配置表单 / 自定义页面 注意关闭自动上传。

配置用到的变量

配置裁剪用到的对话框

JSX组件内代码如下：

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

对话框事件绑定：

OnOk事件代码如下：

注意修改第4行中的图片上传组件唯一标识和第14行中的对话框组件唯一标识。

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(); }

将下面代码拷贝至页面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; }

图片上传组件动作绑定

实现效果

在自定义页面中获取表单上传的多张图片时，可以使用数组或循环来处理不定数量的图片。如果您用下标获取报错，可能是因为图片数量不固定导致索引越界。以下是一种解决方法：

1. 使用数组：在表单提交时，将每张图片的信息存储到一个数组中。例如，命名为images[]，这样就可以接收多个图片。

2. 使用循环：在自定义页面中，使用循环来遍历该数组，以获取每张图片的相关信息。根据您所使用的编程语言和框架，具体的代码实现可能会有所不同。以下是一个示例代码片段，使用 JavaScript 和 HTML 的方式展示：

   // 假设 images 是包含所有图片的数组
   for (let i = 0; i < images.length; i++) {
     const image = images[i];
     // 处理每张图片的逻辑
     // 可以访问 image.name、image.size、image.type 等属性
     // 或者根据需要将图片显示在页面上
   }
   

3. 处理图片数据：在循环中，您可以根据需要对每张图片进行处理，例如保存到数据库、存储到服务器或进行其他操作。