You need to enable JavaScript to run this app.
导航
小程序版上传 SDK 接入文档(旧版)
最近更新时间:2024.02.20 11:28:30首次发布时间:2021.02.23 10:42:29

小程序版本版上传 SDK 支持图片的上传。以下将为您介绍 SDK 的集成、配置和回调操作。

SDK 接入

引入 SDK

支持以下两种引入 SDK 方式,您可根据实际需要任选其一。

版本格式为:https://unpkg.pstatp.com/tt-uploader/VERSION/dist/index.js

您可点击 npmjs 获取最新版本。

各版本地址可通过更换 VERSION 获得,如 1.0.21 版本地址为:https://unpkg.pstatp.com/tt-uploader/1.0.21/dist/index.js

初始化上传配置

import TTUploader from 'tt-uploader-miniprogram';
let uploader = new TTUploader({
    // 必填,图片上传相关配置
    imageConfig: {  
        serviceId: 'your serviceId'  // 必填,申请的图片服务id 
    }
});

获取上传签名

上传前需要从服务端获取上传 sts2 签名,签名算法服务端接入,接入方法请参考服务端各生成上传凭证文档。

说明

由于签名计算放在前端会暴露 AccessKey 和 SecretKey,我们把签名计算过程放在后端实现(利用签名SDK可以生成临时的 AK、SK等 ),前端通过 http 请求向后端获取签名结果,正式部署时请在后端加一层自己网站本身的权限检验。

添加域名白名单

把网关地址和上传地址添加到小程序的访问白名单中。

字段名内容
request 域名https://imagex.volcengineapi.com

uploadFile 域名

  • https://tos-lf-x.snssdk.com
  • https://tos-hl-x.snssdk.com
  • https://tos-nc2-slb2.bytecdn.cn
  • https://tos-nc2-slb1.bytecdn.cn
  • https://tos-lf-x-tob.bytecdn.cn
  • https://tos-lq-x-tob.bytecdn.cn
  • https://tos-hl-x-tob.bytecdn.cn

开始上传

uploader.start({
    path: res.tempFilePaths[0], // 必填,把 chooseImage 回调的参数(filePath)传进来
    size: res.tempFiles[0].size, // 必填,把 chooseImage 回调的参数(size)传进来
    type: 'image', // 必填,指定上传类型为图片
    stsToken: token, // 必填,从服务端拿到的token,token为一个对象类型,见下方说明
    serviceId: 'xxxx', // 可选,指定本次上传时的serviceId;如果不填,则会使用初始化配置imageConfig中的serviceId
    storeKey: 'xxx',  // 可选,上传文件的存储 key 不支持以/开头或结尾,不支持/连续出现)。默认使用随机生成的字符串作为存储 key。
    prefix: 'abc', // 可选,指定时下发的存储 key 将为 prefix/{随机key}{fileExtension}
    fileExtension: '.png', // 可选,指定时下发的存储 key 将为 prefix/{随机key}{fileExtension}
    skipMeta: false, // 可选,是否获取图片meta信息,默认为 false
    skipCommit: false, // 可选,是否跳过上传成功后的上报阶段(提高上传成功率,减少上传耗时),如果指定为 true,则在控制台默认不展示该文件。
     // 上传成功回调
    success: function(data) {
        console.log('upload success');
        console.log(data);
    },
    // 上传失败回调
    fail: function(data) {
        console.log('upload fail');
        console.log(data);
    },
    // 上传进度回调
    progress: function(data) {
        console.log('progress: ', data);
    }
});

初始化配置

通用配置

配置属性可在实例化时传入,示例如下所示:

const ttUploader = new TTUploader({
    userId: 'xxx',
    appId: 'xxx',
    imageConfig: {
        serviceId: "xxx"
    }
});

各个配置及其对应作用如下表所示:

字段名类型是否必传描述

region

String

上传地区。取值如下所示:

  • cn-north-1:国内,默认国内
  • ap-singapore-1:新加坡
imageConfigObject图片上传专用配置,默认为 null。

图片专用配置

示例如下所示:

imageConfig: {
    serviceId: "xxx"
}
字段名类型是否必传默认值
serviceIdString服务 ID,默认值为 null。

回调

success回调

字段名称类型描述
ImageUriString图片 uri,格式为:bucket/oid。
ImageWidthNumber图片宽度
ImageHeightNumber图片高度
ImageMd5String图片数据的 md5 值
FileNameString文件名,与 ImageUri 中的 oid 部分一致。
UriString与 ImageUri 一致

progress回调

字段名称类型描述
progressNumber上传进度百分比
totalBytesSentNumber已经上传的数据长度,单位 Bytes。
totalBytesExpectedToSendNumber预期需要上传的数据总长度,单位 Bytes。

error 回调

字段名称类型描述
messageString错误描述
stageString错误阶段
resObject错误响应

错误码

错误码描述
100006请求过期或请求的签名时间来自未来,如果仅部分用户出现该问题,可能为系统时间不准导致
100009请求的AK不合法
100026错误的STS or STS2,可能是多种错误,例如签名错误、过期等

功能 List

小程序版本只包含基础的上传功能,无分片上传,暂停等功能。

Demo 示例

import TTUploader from '../utils/tt-uploader-miniprogram.js';
let uploader = new TTUploader({
    // 必填,图片上传相关配置
    imageConfig: {
        serviceId: 'your serviceId' // 必填,申请的图片服务id
    }
});
wx.chooseImage({
    sourceType: ['album'],
    count: 1, 
    success: (res) => { 
      this.uploaderV5.start({
        path: res.tempFilePaths[0],
        size: res.tempFiles[0].size,
        type: 'image',
        serviceId: 'xxxx',
        stsToken: token,
        success: function(data) {
          console.log('upload success');
          console.log(data.ImageUri);
        },
        fail: function(data) {
          console.log('upload fail');
          console.log(data);
        },
        progress: function(data) {
          console.log('progress: ', data);
        }
     },
     fail: (res) => { 
       console.log('chooseImage调用失败:', res); 
     } 
});