如何将AgilePoint表单签名URI转图片并保存至SharePoint列表？

步骤1：Data URI转Blob对象 #

签名绘图返回的是Data URI格式，需先转换为Blob二进制对象才能上传到SharePoint：

function dataURItoBlob(dataURI) {
  // 拆分MIME类型和Base64数据
  const [mimePart, dataPart] = dataURI.split(',');
  const mimeString = mimePart.split(':')[1].split(';')[0];
  // 解码Base64字符串
  const byteString = atob(dataPart);
  // 转换为ArrayBuffer
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  // 返回Blob对象
  return new Blob([ab], { type: mimeString });
}

步骤2：上传Blob到SharePoint列表 #

通过SharePoint REST API将Blob上传为列表项的附件，或上传到文档库后关联到列表字段：

上传为列表项附件

function uploadToSharePoint(blob, fileName, listName, itemId, spWebUrl) {
  // 先获取SharePoint请求摘要（用于验证请求）
  return fetch(`${spWebUrl}/_api/contextinfo`, {
    method: 'POST',
    headers: { 'Accept': 'application/json;odata=verbose' }
  })
  .then(res => res.json())
  .then(digestRes => {
    const digestValue = digestRes.d.GetContextWebInformation.FormDigestValue;
    // 构造上传附件的API端点
    const uploadEndpoint = `${spWebUrl}/_api/web/lists/getbytitle('${listName}')/items(${itemId})/attachmentfiles/add(FileName='${fileName}')`;
    
    return fetch(uploadEndpoint, {
      method: 'POST',
      headers: {
        'Accept': 'application/json;odata=verbose',
        'X-RequestDigest': digestValue,
        'Content-Type': blob.type
      },
      body: blob
    });
  })
  .then(uploadRes => uploadRes.json())
  .catch(error => console.error('上传失败:', error));
}

步骤3：整合到AgilePoint表单逻辑 #

修改你现有的代码，在获取签名URI后完成转换和上传：

function handleSignatureUpload() {
  const options = { fieldId: 'Drawing1' };
  
  eFormHelper.getFieldValue(options, function(result) {
    if (result.isSuccess) {
      const signatureURI = result.data;
      // 转换为Blob
      const signatureBlob = dataURItoBlob(signatureURI);
      
      // 配置SharePoint参数，替换为你的实际信息
      const spConfig = {
        spWebUrl: 'https://your-sharepoint-site-url', // 你的SP站点地址
        listName: '签名记录表', // 目标列表名称
        itemId: 1, // 要添加附件的列表项ID（新建项需先创建再获取ID）
        fileName: `签名_${new Date().getTime()}.png` // 自定义文件名，避免重复
      };
      
      // 执行上传
      uploadToSharePoint(signatureBlob, spConfig.fileName, spConfig.listName, spConfig.itemId, spConfig.spWebUrl)
        .then(res => {
          console.log('签名上传成功:', res);
          // 可添加用户提示或后续业务逻辑
        })
        .catch(err => {
          console.error('签名上传出错:', err);
        });
    } else {
      console.error('获取签名数据失败:', result.error);
    }
  });
}

关键注意事项 #

• 权限配置：确保AgilePoint应用拥有访问目标SharePoint站点的权限，可通过Azure AD应用权限或SharePoint应用权限配置
• 列表项ID：如果是新建列表项，需先调用SharePoint API创建项，获取返回的ID后再执行上传
• 图片字段替代方案：若需将图片存入列表的「图片」字段，需先上传到站点资产库，再将图片URL存入字段，上传端点改为：${spWebUrl}/_api/web/getfolderbyserverrelativeurl('SiteAssets')/files/add(overwrite=true,url='${fileName}')

内容的提问来源于stack exchange，提问作者Shahar Hayoun