WeChat gadget WeUI Uploader

May 21, 2021 WeChat Mini Program Development Document

The image is uploaded to the Updater component.

Example code:

{
  "usingComponents": {
    "mp-uploader": "../components/uploader/uploader",
    "mp-cells": "../components/cells/cells",
    "mp-cell": "../components/cell/cell"
  },
  "navigationBarTitleText": "UI组件库"
}

<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'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                that.setData({
                    files: that.data.files.concat(res.tempFilePaths)
                });
            }
        })
    },
    previewImage: function(e){
        wx.previewImage({
            current: e.currentTarget.id, // 当前显示图片的http链接
            urls: this.data.files // 需要预览的图片http链接列表
        })
    },
    selectFile(files) {
        console.log('files', files)
        // 返回false可以阻止某次文件上传
    },
    uplaodFile(files) {
        console.log('upload files', files)
        // 文件上传的函数，返回一个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)
    }
});

The list of properties

Property	Type	The default	Required	Description
ext-class	string		Whether	A class added to the internal structure of a component that can be used to modify the style inside a component
title	string		Whether	The component title
tips	string		Whether	Tips for components
delete	boolean		Is	Whether to display the delete button
size-type	array		Is	It's the same as the sizeType parameter of Jose Image
source-type	array		Is	It's the same as TheSourceType parameter for Jose Image
max-size	number	5 * 1024 * 1024	Is	The maximum file limit for image uploads is 5M by default
max-count	number	1	Whether	The limit on the number of images uploaded
files	array<object>		Whether	The current picture list
select	function		Whether	When you select a picture, the filter function returns true to indicate that the picture is valid
upload	function		Whether	The function uploaded by the image, returning Tomise, Promise's callback must be resolve ('urls') to indicate success, or it will fail
bindselect	eventhandler		Whether	The picture selects the triggered event, detail for the binary Buffer list of the selected picture, where the tmpFiles and the tempFilePaths are the fields returned by Jose Image
bindcancel	eventhandler		Whether	Events that cancel picture selection, detail is .
bindsuccess	eventhandler		Whether	The image uploads the successful event, the detail is the urls, and the urls are the urls parameters that the update function successfully returns
bindfail	eventhandler		Whether	Image upload failure event, detail is type, err Msg, type 1 indicates that the picture exceeds the size limit, type 2 indicates the selection of the picture failed, type 3 indicates the image upload failed.
binddelete	eventhandler		Whether	Delete the event triggered by the picture, the detail is the index, item, index indicates the deleted picture's underse cursor, item is the picture object.

Files represents the current list of pictures, each defined as

Property	Type	Required	Description
Url	string	Is	Photo link
loading	boolean	Whether	The picture is uploaded
error	boolean	Whether	The image upload failed

WeChat gadget WeUI Uploader

Table of contents

Example code:

The list of properties

Cookie Consent