tourism-wxapp/components/upload/index.js

// components/upload/index.js
const qiniuUploader = require("../../utils/qiniuUploader");
const Parse = getApp().Parse
const company = getApp().globalData.company
/**
 * @class NovaUpload
 * @desc 上传组件
 * @memberof module:components
 * @desc 
 * # 一、组件引用
 * 模块引用：如app.json根组件引用
 * ``` json
 * "usingComponents": {
 *  "upload": "/components/upload/index",
 * }
 * ```
 * 上传令牌获取：xxxpage.js
 * ``` js
 *  async getUptoken() {
 *      // 根据config.js全局配置company的ID来获取上传口令
        let res = await Parse.Cloud.run('qiniu_uptoken', {
            company: getApp().globalData.company
        })
        console.log(Object.keys(res));
        console.log(res);
        this.setData({
            uptokenURL: res.uptoken,
            domain: res.domain,
            uploadURL: res.zoneUrl
        })
    },
    async onLoad(){
      this.getUptoken()
    }
 * ```
 # 二、组件示例
 * 模板标签：xxxpage.wxml 页面中使用<upload>标签传参使用

 ## 文件上传
 * ``` html
 *  <!-- 文件上传 -->
  <view class="text-title">请上传房产证内页或购房合同内页，需露出署名</view>
  <view class="title-text1">(您上传的资料仅作认证使用，并交加密处理)</view>
  <view class="alboum">
    <upload bind:onChangeFile="changeFile" fileList="{{fileList}}" accept="all" maxCount="3" uploadURL="{{uploadURL}}" domain="{{domain}}" uptokenURL="{{uptokenURL}}" />
  </view>
 * ```

 * ``` html

 ## 多图上传
 * <!-- 多图上传 -->
 * <view class="alboum">
    <view class="alboum-text">评价图片</view>
    <upload bind:onChangeFile="changeFile" fileList="{{fileList}}" accept="image" maxCount="6" uploadURL="{{uploadURL}}" domain="{{domain}}" uptokenURL="{{uptokenURL}}"></upload>
  </view>
 * ```

 * ``` html

 ## 单图上传
 * <!-- 单图上传 -->
  <view class="top-figure">店铺首图</view>
  <upload bind:onChangeFile="changeFile" fileList="{{imageList}}" accept="image" maxCount="1" uploadURL="{{uploadURL}}" domain="{{domain}}" uptokenURL="{{uptokenURL}}"></upload>
 * ```
 */
Component({
  /**
   * 组件的属性列表
   * @memberof module:components.NovaUpload
   * @type {object}
   * @property {string} accept - 图片地址
   * @property {string} icon - 图标
   * @property {number} maxCount - 最大数量
   * @property {string} loadImg - 未上传前图片格式样式
   * @property {string} text - 未上传前文字解释
   */
  properties: {
    accept: {
      type: String,
      value: "image"
    },
    icon: {
      type: String,
      value: "plus"
    },
    maxCount: {
      type: Number,
      value: 1
    },
    maxSize: {
      type: Number,
      value: null
    },
    uploadURL: {
      type: String,
      value: ""
    },
    domain: {
      type: String,
      value: ""
    },
    uptokenURL: {
      type: String,
      value: ""
    },
    fileList: {
      type: Array,
      value: []
    },
    loadImg: {
      type: String,
      value: ""
    },
    text: {
      type: String,
      value: ""
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    fileList: [],
    capture: ['album', 'camera']
  },

  /**
   * 组件的方法列表
   * @memberof module:components.NovaUpload
   * @type {object}
   * @method afterRead - 读取后执行
   */
  methods: {
    /**
     * 读取后执行
     * @memberof module:components.NovaUpload
     * @param {*} event - 事件参数
     */
    afterRead(event) {
      let that = this;
      const {
        file
      } = event.detail;
      file.forEach(item => {
        let tempFilePaths = item.url;
        qiniuUploader.upload(
          tempFilePaths,
          (res) => {
            let {
              imageURL,
              size
            } = res
            const {
              fileList = []
            } = this.data;
            fileList.push({
              url: imageURL,
              size: size
            });
            this.setData({
              fileList
            });
            this.triggerEvent("onChangeFile", this.data.fileList);
          },
          (error) => {
            console.log("error: " + error);
          }, {
            region: "SCN",
            uploadURL: that.data.uploadURL,
            domain: that.data.domain,
            uptoken: that.data.uptokenURL,
          }
        );
      })
    },

    deleteImg(e) {
      let fileList = this.data.fileList;
      fileList.splice(e.detail.index, 1);
      this.setData({
        fileList
      });
      this.triggerEvent("onChangeFile", this.data.fileList);
    },

    getUptoken() {
      return Parse.Cloud.run('qiniu_uptoken', {
        company: company
      })
    },
  },
  // attachment 表， 资源链接加上companyId


  lifetimes: {
    async created() {},
    async attached() {
      let uploadData = await this.getUptoken()
      if (uploadData) {
        this.setData({
          uploadURL: uploadData.zoneUrl,
          domain: uploadData.domain,
          uptokenURL: uploadData.uptoken,
        })
      }
    },
    moved() {},
    detached() {},
    ready: function () {}
  },
})