WePY Image Uploader

简介

「WePY Image Uploader」是基于「WePY」小程序框架所开发的图片上传组件，其UI和交互如下图所示：

• 点击加号可选择图片进行上传；
• 上传过程中，图片上方有黑色的半透明覆盖层，其宽度随着上传进度而变化，起到进度条的作用；
• 上传过程中，不阻塞界面上的其他操作；
• 点击已上传或上传中图片右上角的叉，可以移除图片（仅在页面数据中移除，非移除图片本身）；
• 点击小图可以查看大图。

（注意：本组件目前仅支持基于「WePY」开发的微信小程序项目）

安装

在小程序项目目录下安装本组件：

npm install wepy-img-uploader --save

属性说明

imgs

• 说明：初始图片URL。
• 必填：否。
• 类型：字符串数组或对象数组。为对象数组时，每个对象应包含 img 和 thumb 两个属性，分别表示 原图URL 和 缩略图URL 。
• 默认值：空数组。

count

• 说明：最大图片数量。
• 必填：否。
• 类型：数字。
• 默认值：1。

beforeUpload

• 说明：上传前执行的函数，一般用于获取云存储的 token ，必须返回 Promise 。
• 必填：否。
• 类型：函数。
• 默认值：无。

upload

• 说明：执行上传的函数，必须返回 UploadTask 。
• 必填：无。
• 类型：函数，其参数依次为（参数较为复杂，请结合下文的示例查看）：
  • 图片路径（本地临时路径）；
  • beforeUpload返回的数据；
  • 用于解决上传Promise的resolve函数，上传成功后传入图片路径调用；
  • 用于拒绝上传Promise的reject函数，上传失败时传入错误对象调用。

事件说明

change

• 说明：文件上传完成（无论成功与否）后触发。
• 事件参数属性：
  • imgs：上传结果数组，数组中的字符串值即为已上传图片的URL，false值表示该图片还在上传中。

调用示例

<template lang="wxml">
    <view class="container">
        <uploader :count="imgCount" :imgs="imgs" :beforeUpload="beforeUpload" :upload="upload" @change.user="uploadChange"  />
    </view>
</template>
 
<style>
.container { margin-left: 45rpx; }
</style> 
 
<script>
import wepy from 'wepy';
import WepyImgUploader from 'wepy-img-uploader';
 
export default class Test extends wepy.page {
    components = {
        uploader: WepyImgUploader
    }
 
    data = {
        // 初始图片
        imgs: [
            'https://qiniu-pic.ibeiliao.com/Ft7Zv-D_fGeNY3JiMDVxpCQ0yUFu',
            'https://qiniu-pic.ibeiliao.com/Fi3PDHm46m6rIEWa4RGSlwl_ffYp',
            'https://qiniu-pic.ibeiliao.com/Fif-BoZQwXNB14yQsuDu-4vugE-W',
            'https://qiniu-pic.ibeiliao.com/FiXPzJ94pFrEEETqKwUp4aciHxZl'
        ].map((url) => {
            return {
                img: url,
                // 假设resizeImg为生成缩略图URL的函数
                thumb: resizeImg(url, 300)
            };
        }),
 
        // 记录上传结果
        uploadResult: null,
 
        // 最大图片数量
        imgCount: 8,
 
        // 上传前先获取token
        beforeUpload() {
            // 假设getToken为获取上传token的方法
            return getToken();
        },
 
        // 上传
        upload(path, token, resolve, reject) {
            return wx.uploadFile({
                // 此处省略其他参数
                success(res) {
                    if (res.statusCode === 200) {
                        // 上传成功后返回URL
                        resolve(res.data.url);
                    } else {
                        reject(new Error(res.errMsg));
                    }
                },
                fail(e) {
                    reject(new Error(e.errMsg));
                }
            });
        }
    }
 
    methods = {
        // 每个文件上传成功都会触发change事件
        uploadChange(e) {
            this.uploadResult = e.imgs;
        }
    }
 
    onLoad() {
    }
}
</script> 

注意事项

• 使用不同的数据项记录初始图片和上传结果（例如示例中的 imgs 和 uploadResult 为两项数据），否则可能导致异常情况。
• 通过判断上传结果数组中是否包含false值，即可得知图片是否全部上传完成。