快速开始

在开始接入前，你需要先完成授权。

素材上传器的链接通过 iframe 嵌入你的系统，你的代码和组件会基于 postMessage 来进行通信交互数据。

素材上传器链接是：{authUrl}?aesUserInfo={encodeURIComponent(经过 aesKey 加密的用户信息)}&targetUrl={encodeURIComponent({domain}/dam_enterprise/asset-uploader)}。参照授权。

其中 domain 为客户内容中台（DAM）的域名。

原生
React

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>素材选择器父页面</title>
  </head>
  <body>
    <script>
      const receiveMessage = (event) => {
        const iframe = document.getElementById('iframe');
        if (!iframe || event.source !== iframe.contentWindow) {
          // 判断是否为当前iframe发出的消息
          return;
        }

        if (event?.data?.type === 'tezign-asset-uploader-ready') {
          // iframe 页面加载完成，可以传入配置参数
          if (!iframe.contentWindow) {
            return;
          }

          iframe.contentWindow.postMessage(
            {
              type: 'tezign-asset-uploader-config',
              data: {
                accept: '',
                maximum: 10,
                maximumTip: '',
              },
            },
            '*',
          );
          return;
        }
        if (event?.data?.type === 'tezign-asset-uploader-confirm') {
          // 点击【确认】 按钮 -- 这里接收已上传完成的文件集合
          console.log(event.data.files);
          return;
        }
        if (event?.data?.type === 'tezign-asset-uploader-cancel') {
          // 点击【取消】 按钮
          console.log(event.data);
          return;
        }
      };
      window.addEventListener('message', receiveMessage, false);
    </script>
    <iframe src=`{authUrl}?aesUserInfo={encodeURIComponent(经过 aesKey
    加密的用户信息)}&targetUrl={encodeURIComponent({domain}/dam_enterprise/asset-uploader)}`
    id="iframe" />
  </body>
</html>

import React, { useEffect, useRef } from 'react';

// 此iframeUrl 填入上传链接
const iframeUrl = `{authUrl}?aesUserInfo={encodeURIComponent(经过 aesKey 加密的用户信息)}&targetUrl={encodeURIComponent({domain}/dam_enterprise/asset-uploader)}`;

export default () => {
  const ref = useRef(null);

  const receiveMessage = (event) => {
    const iframe = document.getElementById('iframe');
    if (!iframe || event.source !== iframe.contentWindow) {
      // 判断是否为当前 iframe 发出的消息
      return;
    }

    if (event?.data?.type === 'tezign-asset-uploader-ready') {
      // iframe 页面加载完成，可以传入配置参数
      ref.current?.contentWindow?.postMessage(
        {
          type: 'tezign-asset-uploader-config',
          data: {
            accept: '',
            maximum: 10,
            maximumTip: '',
          },
        },
        '*',
      );
      return;
    }
    if (event?.data?.type === 'tezign-asset-uploader-confirm') {
      // 点击【确认】 按钮 -- 这里接收已上传完成的文件集合
      console.log(event.data.files);
      return;
    }
    if (event?.data?.type === 'tezign-asset-uploader-cancel') {
      // 点击【取消】 按钮
      console.log(event.data);
      return;
    }
  };

  useEffect(() => {
    window.addEventListener('message', receiveMessage, false);
    return () => {
      window.removeEventListener('message', receiveMessage);
    };
  }, []);

  return (
    <div>
      <iframe ref={ref} src={iframeUrl} id="iframe" />
    </div>
  );
};

上传完成后，点击页面弹窗「确认」按钮，上传 iframe 会使用 postMessage 把所有上传成功的文件数组在您的页面中返回（此数组对应示例中的 event.data.files），该响应数组包含 DAM 的所有资产信息。