与MuseDAM交互
上传素材到用户空间

上传素材到用户空间

第三方应用可以将文件上传到用户的MuseDAM。我们提供了两种方式实现这一场景，分别适用于前端为主的应用（如支持用户直接转存文件）和服务端为主的应用（如接收用户发送的文件，然后转存到MuseDAM）。

基于文件夹选择器的上传流程

通过嵌入iframe的方式，第三方应用可以集成MuseDAM的文件夹选择器。通过触发上传事件，第三方应用可以将资源存储到用户的MuseDAM中。整个流程分为4个步骤：

  • 通过iframe将文件夹选择器集成到第三方应用中
  • 通过postMessage的方式，第三方应用将待上传的文件信息传入到文件夹选择器
  • 用户选择目标文件夹
  • 文件夹选择器完成上传，触发回调时间
https://musedam.cc/outer/outerChoice?type=content

React接入示例：

import React, { useState, useEffect } from "react";
 
export default () => {
  useEffect(() => {
    const receiveMessage = (event) => {
      if (event?.data?.type === "museDAM-choiceModal-loaded") {
        // 页面加载成功
        // todo
        console.log(event.data);
 
        // 将待上传的文件传入
        const iframe = document.querySelector("#iframe");
        iframe.contentWindow.postMessage(
          {
            type: "open",
            data: {
              files: [
                new File(["foo"], "foo.txt", {
                  type: "text/plain",
                }),
              ],
              options: { isUrl: "", link: "" },
            },
          },
          "*"
        );
 
        return;
      }
      if (event?.data?.type === "museDAM-choiceModal-unMounted") {
        // 页面卸载
        // todo
        console.log(event.data);
        return;
      }
      if (event?.data?.type === "museDAM-choiceModal-cancel") {
        // 弹窗关闭
        // todo
        console.log(event.data);
        return;
      }
      if (event?.data?.type === "museDAM-choiceModal-success") {
        // 上传成功回调
        // todo
        console.log(event.data);
        return;
      }
      if (event?.data?.type === "museDAM-choiceModal-error") {
        // 上传失败回调
        // todo
        console.log(event.data);
        return;
      }
    };
 
    window.addEventListener("message", receiveMessage);
    return () => {
      window.removeEventListener("message", receiveMessage);
    };
  }, [setVisible]);
 
  const iframeUrl = "https://musedam.cc/outer/outerChoice?type=content";
  return (
    <div>
      <iframe
        allowtransparency="true"
        id="iframe"
        width="100%"
        height="100%"
        src={iframeUrl}
      />
    </div>
  );
};

其中，第三方应用中能接收到的事件如下：

事件类型描述
museDAM-selector-init页面初始化
museDAM-selector-loaded页面加载成功
museDAM-selector-page-unMounted页面卸载
museDAM-selector-page-success上传成功
museDAM-selector-page-error上传失败
museDAM-selector-page-cancel弹窗关闭

待上传的文件，应该采用如下格式传入到文件夹选择器中：

{
    files: File[] | string[],
    options: {
        isUrl: boolean // 文件集合内容是否是地址；如果为地址，files传入string[]类型即可
        link: string // 文件关联地址
    }
}

基于文件夹选择器和开放API的流程

第三方应用也可以仅使用文件夹选择器的文件夹选择功能，从而获取到folderId，后续再通过开放API将文件传入到用户指定的文件夹。整个过程分为4个步骤：

  • （可选）用户在MuseDAM文件夹选择器中选择目标文件夹
  • 获取临时上传凭证
  • 上传文件到阿里云OSS
  • 根据文件key写入到MuseDAM

1. 用户选择目标文件夹

通过嵌入iframe的方式，用户可以在第三方应用中选择MuseDAM中的文件夹。整个流程分为3个步骤：

注意：文件夹选择是可选的，不需要时可将后续使用到的folderId设置为0，此时文件将被上传到MuseDAM的根目录。

https://musedam.cc/outer/outerChoice?type=content&file=empty

React接入示例：

import React, { useState, useEffect } from "react";
 
export default () => {
  useEffect(() => {
    const receiveMessage = (event) => {
      if (event?.data?.type === "museDAM-choiceModal-loaded") {
        // iframe 页面加载完成，可以传入配置参数
        const iframe = document.getElementById("iframe");
        iframe.contentWindow.postMessage(
          {
            type: "museDAM-choiceModal-init",
            data: {
              theme:'dark' // dark | light
            },
          },
          "*"
        );
        return;
      }
      if (event?.data?.type === "museDAM-choiceModal-success") {
        // 用户点击【确认】
        console.log(event.data);
 
        const folderId = event.data.payLoad.id
        const folderId = event.data.payLoad.orgId
        // TODO 进一步操作folderId（文件夹）和orgId（团队空间）
        // 若orgId为1，则不应传入到接口中
 
        return;
      }
    };
 
    window.addEventListener("message", receiveMessage);
    return () => {
      window.removeEventListener("message", receiveMessage);
    };
  }, [setVisible]);
 
  const iframeUrl = "https://musedam.cc/outer/outerChoice?type=content&file=empty";
  return (
    <div>
      <iframe
        allowtransparency="true"
        id="iframe"
        width="100%"
        height="100%"
        src={iframeUrl}
      />
    </div>
  );
};

其中，第三方应用中能接收到的事件如下：

事件类型描述
museDAM-selector-loaded页面加载成功
museDAM-selector-page-unMounted页面卸载
museDAM-selector-page-success用户点击确认
museDAM-selector-page-cancel弹窗关闭

2. 获取临时上传凭证

Authorization: TOKEN_TYPE TOKEN
POST https://open.musedam.cc/open-api/standard/call/muse/sts-tmp

请求示例：

curl --location --request POST 'https://open.musedam.cc/open-api/standard/call/muse/sts-tmp' \
--header 'Content-Type: application/json' \
--header 'Authorization: TOKEN_TYPE TOKEN'

请求成功后，将获得如下格式的数据：

通用字段类型描述
codestring状态码，0=成功，其他状态码见《通用错误码》
messagestring错误信息
resultobject结果对象
result字段类型描述
endPointstringendPoint
bucketstring阿里云bucket 名称
dirstring待上传的目录
accessKeyIdstring临时accessKeyId
accessKeySecretstring临时accessKeySecret
securityTokenstring临时securityToken

响应示例：

{
    "code": "0",
    "message": "处理成功",
    "result": {
        "endPoint": "oss-cn-beijing.aliyuncs.com",
        "bucket": "minidam-open",
        "dir": "",
        "accessKeyId": "STS.NU5jvoru3H2JXoAuXh9APG7cW",
        "accessKeySecret": "HggGwsf11WJHamNBQgCzweaZpUFjy3yhh2HmnYo3ezuh",
        "securityToken": "CAIS/gF1q6Ft5B2yfSjIr5aAIczbn6oS//ChWknwkVg9Nc58qPLItTz2IH1NfHZvAOsesfs0mm9T5v4clqVoRoReREvCKM1565kPLvJsoBeZ6aKP9rUhpMCPOwr6UmzWvqL7Z+H+U6muGJOEYEzFkSle2KbzcS7YMXWuLZyOj+wMDL1VJH7aCwBLH9BLPABvhdYHPH/KT5aXPwXtn3DbATgD2GM+qxsmtP/ik5TMtkKF1gamkbREnemrfMj4NfsLFYxkTtK40NZxcqf8yyNK43BIjvwr1fQbpm6c5o7CWAcOuEXebfCv6NRqKxRiI607Ha9Ipf25kuV1vPwYKzxpLuP4VxqAAYVJFjoHzt1gmsMFUQ3Calo4+l7P9RHZ5vOOevb1t4VuusWpVuNvR/mgvSUfof7ajbdH4kGDm2SoW4e6FIqydUrIwhoQLesBPZqts08A507xUFUhReGkdIqZWjAUCU1Q7MjGOtCL4uPp5Yl1sIKlvU3/dpMv0QdWtiDklJabnrxZ"
    }
}

3. 上传文件到阿里云OSS

根据第2步的accessKeyId, accessKeySecret和securityToken，结合阿里云SDK (opens in a new tab)将文件上传到OSS。

4. 写入到MuseDAM

文件上传到OSS后，第3步的key将作为文件唯一描述符。然后可以调用开放接口将文件写入到MuseDAM中。

获取用户团队列表（可选）

Authorization: TOKEN_TYPE TOKEN
POST https://open.musedam.cc/open-api/standard/call/muse/org-info

请求示例：

curl --location --request POST 'https://open.musedam.cc/open-api/standard/call/muse/org-info' \
--header 'Content-Type: application/json' \
--header 'Authorization: TOKEN_TYPE TOKEN'

请求成功后，将获得如下格式的数据：

通用字段类型描述
codestring状态码，0=成功，其他状态码见《通用错误码》
messagestring错误信息
resultobject结果对象
result字段类型描述
orgListobject[]
orgList字段类型描述
idnumber团队空间id
orgNostring空间ID
namestring团队名称
orgFeeTypenumber团队类型（0：免费版，1：收费版，2：体验版, 3：空白)
roleIdnumber1：所有者 2：管理员 3：成员-可编辑 4：成员-仅查看 5： 成员-上传查看 6：成员-可上传查看下载
roleCodestringowner， admin ，member_edit ，member_view ，member_upload_view ，member_upload_view_download
roleNamestring所有者， 管理员， 成员-可编辑，成员-仅查看 ，成员-上传查看 ,成员-可上传查看下载
validboolean是否有效，false=过期无效
invalidTimenumber失效时间，时间

响应示例：

{
    "code": "0",
    "message": "OK",
    "result": {
        "orgList": [
            {
                "id": 10,
                "name": "测试哦111",
                "orgNo": "M350233",
                "orgFeeType": 1,
                "roleId": 3,
                "roleCode": "member_edit",
                "roleName": "成员-可编辑",
                "valid": true,
                "invalidTime": 1699459200000
            }
        ]
    }
}

当roleCode != member_view，valid=true，invalidTime > now() 才有写入该团队空间的权限

素材入库API

Authorization: TOKEN_TYPE TOKEN
POST https://open.musedam.cc/open-api/standard/call/muse/material-save
请求参数类型描述
paramobject业务参数，对象类型
param字段类型描述
materialsobject[]
orgIdnumber可选，团队id，不填表示存入个人空间
materials字段类型描述
keystringoss bucket 文件唯一描述符
folderIdnumber文件夹id，不传默认根目录
namestring名称，不带后缀名
extensionstring后缀名
sizenumber大小，单位：B
widthnumber宽
heightnumber高
descriptionstring描述
tagsstring[]标签数组，标签名称即可，如"fruit"
linkstring素材链接来源

请求示例：

curl --location --request POST 'https://open.musedam.cc/open-api/standard/call/muse/material-save' \
--header 'Authorization: TOKEN_TYPE TOKEN' \
--header 'Content-Type: application/json' \
--data-raw '{
    "orgId": 185,
    "materials": [
        {
            "key": "fb5cb7fa335fd89887402df2213e32d1.png",
            "folderId": 0,
            "name": "一张图片",
            "extension": "png",
            "size": 426939,
            "width": 1200,
            "height": 1163,
            "description": "",
            "tags": [
                "wzw"
            ]
        }
    ]
}'

请求成功后，将获得如下格式的数据：

通用字段类型描述
codestring状态码，0=成功，其他状态码见《通用错误码》
messagestring错误信息
resultobject结果对象
result字段类型描述
materialsobject[]
materials字段类型描述
idnumbermusedam素材唯一id
keystringoss bucket 文件唯一描述符
namestring素材名称
accessUrlstring访问链接，永久

响应示例：

{
    "code": "0",
    "message": "处理成功",
    "result": {
        "materials": [
        {
            "id": 6867423,
            "key": "fb5cb7fa335fd89887402df2213e32d1.png",
            "name": "一张图片",
            "accessUrl": "xxxx"
        }
        ]
    }
}