miniprogram-qiniuupload

小程序自定义组件 - 七牛上传组件

使用此组件需要依赖小程序基础库 2.3.2 以上版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。 项目参考@oubingbing七牛传图插件并结合自身项目改为了自定义第三方组件

使用方法

1. 安装 miniprogram-qiniuupload

npm install --save @carpenter/miniprogram-qiniuupload

2. 在需要使用 miniprogram-qiniuupload 的页面 page.json 中添加 miniprogram-qiniuupload 自定义组件配置

{
  "usingComponents": {
    "upload": "@carpenter/miniprogram-qiniuupload",
    // "imggrid": "@carpenter/miniprogram-qiniuupload"
  }
}

3. WXML 文件中引用 miniprogram-qiniuupload

  <!-- 目前暂不支持自定义样式 -->
  <upload
    id="upload"
    info="{{ uploadInfo }}"
    isUpload="{{ true }}"
    bindsuccess="onUpImgSuccess"
    binddelete="onDeleteImgSuccess"
    binderror="onUpImgError"
  />
  <!-- <imggrid list="{{ list }}" /> -->
  <!-- <canvas canvas-id="compressCanvas" style="width: 300px; height:300px;"></canvas> -->

miniprogram-qiniuupload 参数

| 属性名 | 类型 | 默认值 | 是否必须 | 说明 | |--------------|--------------|--------------|--------------|----------------------------| | info | Object | | 上传 ？是 ：否 | 七牛配置信息 | | isUpload | Boolean | false | 上传 ？是 ：否 | 是否开启上传 | | list | Array | [] | 否 | 纯展示情况下需传入 | | space | Number | 12 | 否 | 图片间距，单位rpx |

info参数

| 属性名 | 类型 | 默认值 | 说明 | |--------------|--------------|--------------|--------------| | uploadNumber | int | 9 | 一次性选择图片的最大限制 | | region | String | ECN | ECN, SCN, NCN, NA，您的七牛存储区域，或者区域地址 | | token | String | | 七牛上传认证token，需要您再后台服务器请求七牛服务器活动，并且维护token的有效期 | | tokenURL | String | | 获取token的api地址 | | tokenFunc | Function | | 处理wx.request返回数据 return token | | fileKey | String | | key值 | | domain | String | | 在七牛配置CDN域名，七牛测试域名有限制，所以需要您在七牛后台配置一个备案域名 | | fileName | Boolean | false | 是否使用七牛文件名 | | imgSecCheck | Boolean | false | 是否对图片鉴黄 |

# 设置 {token} 时 {tokenURL}与{tokenFunc} 不设置
# 设置 {tokenURL}与{tokenFunc} 时 {token} 不设置
    {tokenFunc} 方法返回格式为 {token: 'xxx', key: 'xx', domain: 'http://xx.xx'}
      token 同info.token
      key 同 info.fileKey
      domain 同 info.domain

# 设置 {fileName} 为 false 时
    - 设置 {fileKey} 时文件名为 {fileKey}
    - 未设置 {fileKey} 时文件名以小程序图片临时地址获取
# 设置 {fileName} 为 true 时文件名以七牛生成为准

# 设置 {imgSecCheck} 为 true 时
    page页需添加
    <canvas canvas-id="compressCanvas" style="width: 300px; height:300px;position: fixed;top: 0;left: 3000px;"></canvas>
    鉴黄使用的是微信小程序鉴黄
    通过wx.uploadFile()接口将图片发送给 七牛上传token接口，如果鉴定通过则返回token，不通过不返回token

Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 上传组件配置
    uploadInfo: {
      uploadNumber: 9, // 可以上传图片的数量限制,默认是九张
      region: 'ECN', // ECN, SCN, NCN, NA，您的七牛存储区域
      token: '', // 七牛上传token凭证
      // fileKey: 'xxx',
      // tokenUrl: 'https://xxx.xxx.xxx',
      // tokenFunc: res => {token: res.data.token, key: res.data.key, domain: data.domain},
      domain: 'https://xxx.xxx.xxx', // 您配置的七牛CDN域名
      fileName: false,
    },
    list: [
      'https://xxx.xxx.xxx',
    ]
  },
  /**
   * 上传成功后的回调, 返回全新的图片数组
   */
  onUpImgSuccess(event) {
    console.log(`上传后获得的图片数组：${event.detail}`)
  },
  // 上传后获得的图片数组：['http(s)://xxx.xxx.xxx']

  /**
   * 删除图片的回调，返回全新图片数组
   */
  onDeleteImgSuccess(event) {
    console.log(`删除后剩余的照片数组：${event.detail}`)
  },
  // 删除后剩余的照片数组：['http(s)://xxx.xxx.xxx']
  /**
   * 上传图片出错的回调
   */
  onUpImgError(event) {
    console.error(`错误：${event.detail}`)
  }
  /**
   * 清除
   */
  clearUpload() {
    this.selectComponent('#upload').clearImageArray()
  }
})

绑定域名

微信小程序需要在微信管理后台绑定相应的域名，否则会被拦截，根据自己七牛存储区域绑定对应的域名，存储区域与域名的对应如下所示

ECN : https://up.qbox.me
NCN : https://up-z1.qbox.me
SCN : https://up-z2.qbox.me
NA  : https://up-na0.qbox.me