文件上传示例代码

该API文档中涉及到各种素材的上传，主要分为以下步骤：

使用相关的素材参数，请求创建接口获取到上传地址。
使用接口返回的地址，将文件发送到该地址。

为方便客户对接，提供上传示例代码，供参考。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试上传</title>
    <style>
        .container {
            width: 700px;
            height: 400px;
            background: #f4f4f4;
            margin-left: auto;
            margin-right: auto;
            margin-top:100px;
        }
        .input-box {
            height: 40px;
        }
        .input-box #uploadUrl {
            width: 500px;
            height: 40px;
            margin-bottom: -20px;
            padding: 2px 10px;
        }
    </style>
</head>
<body>

<div class="container">
    <div style="width: 94%;margin:auto;padding-top:10px;">
        <div class="input-box" style="height: 60px;">
            <span>上传地址：</span>
            <input type="text" placeholder="请输入上传地址" id="uploadUrl"></input>
        </div>
        <div class="input-box">
            <span>上传文件：</span>
            <input type="file" name="file" id="file">
            <button onclick="startUpload();">开始上传</button>
        </div>
        <div style="height: 210px;padding:10px; margin-top: 10px;font-size: 14px;">
            <div>上传结果：</div>
            <div id="uploadResult" style="word-break: break-all; height: 200px;padding:10px; background-color: #ffffff; margin-top: 10px;" contenteditable="true"></div>
        </div>
    </div>
</div>
<script>
    // 上传链接可能包含跨域问题，此页面需要使用不带端口的域名访问。
    // 访问协议(http或https)需要与上传地址保持一致。
    // 可修改上传地址协议为http或https
    let uploadUrlNode = document.querySelector('#uploadUrl');
    let fileInputNode = document.querySelector('#file');
    let uploadResultNode = document.querySelector('#uploadResult');

    function startUpload() {
        let uploadUrl = uploadUrlNode.value;
        if (!uploadUrl || uploadUrl.trim() == '') {
            alert('请输入上传地址');
            return;
        }
        if (!fileInputNode.files || fileInputNode.files.length == 0) {
            alert('请选择要上传的文件');
            return;
        }
        let file = fileInputNode.files[0];
        uploadFile(file, uploadUrl);
        fileInputNode.value = '';
    }

    function uploadFile(file, uploadUrl) {
        var xhr = new XMLHttpRequest();
        xhr.onload = function(e) {
            if (this.status == 200) {
                uploadResultNode.innerHTML = '上传成功,响应结果<br/>' + this.response;
                console.info(this.response);
            }
            if(this.status > 400){
                uploadResultNode.innerHTML = '上传失败, 响应结果<br/>' + this.response;
                console.error(this.response);
            }
        };
        // 上传进度
        xhr.upload.onprogress = function(e) {
            if (e.lengthComputable && e.loaded < e.total) {
                uploadResultNode.innerHTML = "上传进度:" + parseInt(e.loaded * 100 / e.total) + "%";
                console.info("上传进度:" + parseInt(e.loaded * 100 / e.total) + '%');
            }
        }
        if (uploadUrl.indexOf('document.csslcloud.net') > 0) {
            // 上传ppt。
            // 使用formData方式，POST请求，文件参数名：file。
            let formData = new FormData();
            formData.append('file', file);
            xhr.open('post', uploadUrl, true);
            xhr.send(formData);
        } else {
            // 上传其他素材，如图片背景、视频背景、图片贴纸、驱动音频等。
            // 使用PUT方式，Content-Type设为application/octet-stream;charset=utf-8，直接发送文件数据。
            xhr.open('put', uploadUrl, true);
            xhr.setRequestHeader('Content-Type', 'application/octet-stream;charset=utf-8');
            xhr.send(file);
        }
    }
</script>
</body>
</html>

上传PPT成功时返回的结果结构如下：

{
  "success": true,
  "data": {
    "docId": "EE132AB34331D6629C33DC5901307461"
  }
}

docId在平台内部使用，没有实际意义，忽略即可。

上传PPT失败时的返回结果结构如下：

{
  "success": false,
  "result": "FAIL",
  "reasonCode": 1001,
  "errorMsg": "非正常提交，请检查是否有上传文件"
}

只需要判断success即可。

上传其他素材成功时的返回结果结构如下：

{
  "code": "success",
  "data": {
    "recordId": "xxxxx",
    "recordType": 1,
    "accountId": "xxxxx"
  }
}

code：描述上传响应结果，success表示成功。
data：上传成功时，返回的响应数据。
- accountId：账号ID。
- recordType：素材类型。1=图片背景、2=视频背景、3=图片贴纸、4=驱动音频。
- recordId：素材ID。图片背景ID、视频背景ID、图片贴纸ID、驱动音频ID。

上传其他素材失败时返回结果结构如下：

{
  "code": "error",
  "message": "oss upload material process failed!"
}

code：描述上传响应结果，error表示失败。
message：描述上传失败的原因。