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

SDK 接入

引入 SDK

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

npm install tt-uploader-miniprogram
   

初始化上传配置

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

获取上传签名

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

添加域名白名单

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

开始上传

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"
    }
});

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

图片专用配置

示例如下所示：

imageConfig: {
    serviceId: "xxx"
}

回调

success回调

progress回调

error 回调

错误码

功能 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); 
     } 
});