微信小程序 WeUI·Uploader

圖片上傳Uploader組件。

示例代碼：

{
  "usingComponents": {
    "mp-uploader": "../components/uploader/uploader",
    "mp-cells": "../components/cells/cells",
    "mp-cell": "../components/cell/cell"
  },
  "navigationBarTitleText": "UI組件庫(kù)"
}

<view class="page">
    <view class="page__hd">
        <view class="page__title">Uploader</view>
        <view class="page__desc">上傳組件</view>
    </view>
    <view class="page__bd">
        <mp-cells>
            <mp-cell>
                <mp-uploader bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uplaodFile}}" files="{{files}}" max-count="5" title="圖片上傳" tips="圖片上傳提示"></mp-uploader>
            </mp-cell>
        </mp-cells>
    </view>
</view>

Page({
    data: {
        files: [{
            url: 'http://mmbiz.qpic.cn/mmbiz_png/VUIF3v9blLsicfV8ysC76e9fZzWgy8YJ2bQO58p43Lib8ncGXmuyibLY7O3hia8sWv25KCibQb7MbJW3Q7xibNzfRN7A/0',
        }, {
            loading: true
        }, {
            error: true
        }]
    },
    onLoad() {
        this.setData({
            selectFile: this.selectFile.bind(this),
            uplaodFile: this.uplaodFile.bind(this)
        })
    },
    chooseImage: function (e) {
        var that = this;
        wx.chooseImage({
            sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
            sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
            success: function (res) {
                // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
                that.setData({
                    files: that.data.files.concat(res.tempFilePaths)
                });
            }
        })
    },
    previewImage: function(e){
        wx.previewImage({
            current: e.currentTarget.id, // 當(dāng)前顯示圖片的http鏈接
            urls: this.data.files // 需要預(yù)覽的圖片http鏈接列表
        })
    },
    selectFile(files) {
        console.log('files', files)
        // 返回false可以阻止某次文件上傳
    },
    uplaodFile(files) {
        console.log('upload files', files)
        // 文件上傳的函數(shù)，返回一個(gè)promise
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('some error')
            }, 1000)
        })
    },
    uploadError(e) {
        console.log('upload error', e.detail)
    },
    uploadSuccess(e) {
        console.log('upload success', e.detail)
    }
});

屬性列表

files表示當(dāng)前的圖片列表，每一項(xiàng)的定義為