微信小程序图片的上传与显示

  在编写小程序的项目过程中，难免会有需要上传图片，并且显示在指定位置。下面是我在编写微信小程序图片的上传与显示时遇到的一些问题与解决办法。

  微信小程序开发文档里有很详细的介绍，但是有很多人是不是和我一样看文档看不下去。这里我推荐使用微信官方推出的WEUI组件库：https://weui.io/，WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。下面进入代码正题：

一、wxml排版和布局

<view class="page">
    <view class="page__hd">
        <view class="page__title">Uploader</view>
        <view class="page__desc">上传组件</view>
    </view>
    <view class="page__bd">
        <view class="weui-cells">
            <view class="weui-cell">
                <view class="weui-cell__bd">
                    <view class="weui-uploader">
                        <view class="weui-uploader__hd">
                            <view class="weui-uploader__title">图片上传</view>
                            <view class="weui-uploader__info">{{files.length}}/2</view>
                        </view>
                        <view class="weui-uploader__bd">
                            <view class="weui-uploader__files" id="uploaderFiles">
                                <block wx:for="{{files}}" wx:key="*this">
                                    <view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">
                                        <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
                                    </view>
                                </block>
                                <view class="weui-uploader__file">
                                    <image class="weui-uploader__img" src="../images/pic_160.png" mode="aspectFill" />
                                </view>
                                <view class="weui-uploader__file">
                                    <image class="weui-uploader__img" src="../images/pic_160.png" mode="aspectFill" />
                                </view>
                                <view class="weui-uploader__file">
                                    <image class="weui-uploader__img" src="../images/pic_160.png" mode="aspectFill" />
                                </view>
                                <view class="weui-uploader__file weui-uploader__file_status">
                                    <image class="weui-uploader__img" src="../images/pic_160.png" mode="aspectFill" />
                                    <view class="weui-uploader__file-content">
                                        <icon type="warn" size="23" color="#F43530"></icon>
                                    </view>
                                </view>
                                <view class="weui-uploader__file weui-uploader__file_status">
                                    <image class="weui-uploader__img" src="../images/pic_160.png" mode="aspectFill" />
                                    <view class="weui-uploader__file-content">50%</view>
                                </view>
                            </view>
                            <view class="weui-uploader__input-box">
                                <view class="weui-uploader__input" bindtap="chooseImage"></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</view>

二、逻辑代码

Page({
    data: {
        files: []
    },
    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链接列表
        })
    }
});

三、效果展示

四、总结心得

  这里功能是可以实现图片的上传和显示，以及上传的图片放大预览的效果。后面如果有需要删除已上传的图片，我会再一一补充。