微信小程序开发文档微信小程序 WeUI·Uploader

2024-02-25 开发教程微信小程序开发文档匿名 0℃

图片上传Uploader组件。

示例代码：

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

属性列表

属性	类型	默认值	必填	说明
ext-class	string		否	添加在组件内部结构的class，可用于修改组件内部的样式
title	string		否	组件标题
tips	string		否	组件的提示
delete	boolean		是	是否显示删除按钮
size-type	array		是	和chooseImage的sizeType参数一样
source-type	array		是	和chooseImage的sourceType参数一样
max-size	number	5 * 1024 * 1024	是	图片上传的最大文件限制，默认是5M
max-count	number	1	否	图片上传的个数限制
files	array<object>		否	当前的图片列表
select	function		否	选择图片时的过滤函数，返回true表示图片有效
upload	function		否	图片上传的函数，返回Promise，Promise的callback里面必须resolve({urls})表示成功，否则表示失败
bindselect	eventhandler		否	图片选择触发的事件，detail为{tempFilePaths, tempFiles, contents},其中tempFiles和tempFilePaths是chooseImage返回的字段，contents表示所选的图片的二进制Buffer列表
bindcancel	eventhandler		否	取消图片选择的事件，detail为{}
bindsuccess	eventhandler		否	图片上传成功的事件，detail为{urls}，urls为upload函数上传成功返回的urls参数
bindfail	eventhandler		否	图片上传失败的事件，detail为{type, errMsg}，type为1表示图片超过大小限制，type为2表示选择图片失败，type为3表示图片上传失败。
binddelete	eventhandler		否	删除图片触发的事件，detail为{index, item}，index表示删除的图片的下标，item为图片对象。

files表示当前的图片列表，每一项的定义为

属性	类型	必填	说明
url	string	是	图片链接
loading	boolean	否	图片上传中
error	boolean	否	图片上传失败

上一节：微信小程序 WeUI·Slideview

下一节：微信小程序 WeUI·弹窗组件

"微信小程序开发文档"的目录

微信小程序开发文档 微信小程序 WeUI·Uploader

示例代码：

属性列表

微信小程序开发文档微信小程序 WeUI·Uploader