小程序图片上传组件

小程序图片上传组件

父组件页面

<uploadImage limitCount="{{50}}" />

子组件上传图片

页面wxml

<!--component/uploadImage/index.wxml-->
<view class="pic_content">
    <view class="image item" wx:for="{{imageList}}" wx:key="item">
        <image class="pic" data-item="{{item}}" bindtap="previewImg" src="{{item}}" />
        <image class="icon_close" src="{{ResourceImageUrl}}/index/narcotics/upload_close.png" data-item="{{item}}" bind:tap="deleteImage" />
    </view>
    <view class="chooseImage item" bind:tap="chooseImage" wx:if="{{imageList.length<limitCount}}">
        <image src="{{ResourceImageUrl}}/index/narcotics/upload.png" />
        <view class="count">上传照片</view>
    </view>
</view>

页面js

// component/uploadImage/index.js
const common = require('../../js/common')
const myConstants = require('../../js/myConstants')
Component({
    properties: {
        limitCount: {
            type: Number,
            value: 4
        },
        imageList: {
            type: Array,
            value: []
        }
    },

    data: {
        imageList: [], //图片列表
        ResourceImageUrl: '/images',
    },

    methods: {
        // 去选择照片
        chooseImage() {
            // this.properties.limitCount - this.data.imageList.length
            wx.chooseMedia({
                count: 1,
                mediaType: ['image'],
                sourceType: ['album', 'camera'],
                maxDuration: 30,
                camera: 'back',
                success: (res) => {
                    // 拿到资源本地临时路径list
                    let tempFilePaths = res.tempFiles.map(item => item.tempFilePath)
                    var AccessToken = wx.getStorageSync(myConstants.storageKey.AccessToken)
                    // 循环上传至服务器
                    tempFilePaths.forEach(item => {
                        wx.uploadFile({
                            //仅为示例，这里换上你们自己的接口地址，由服务端提供
                            url: common.appurl + myConstants.interfaceUrl.uploadPicture,
                            filePath: item,
                            name: 'file',
                            formData: {
                                'token': AccessToken
                            },
                            success: (res) => {
                                console.log(res, "上传图片")
                                var resData = JSON.parse(res.data)
                                var resText = JSON.parse(resData.resText)
                                var imgPath = resText.result;
                                this.triggerEvent('change', [...this.data.imageList, imgPath])
                                this.setData({
                                    imageList: [...this.data.imageList, imgPath]
                                })
                            },
                            fail(err) {
                                console.log('上传上传失败', err);
                            }
                        })
                    })
                }
            })
        },

        // 删除图片
        deleteImage(e) {
            let that = this;
            let value = e.currentTarget.dataset.item;
            var imageLists = that.data.imageList.filter(item => item !== value);
            wx.showModal({
                title: '提示',
                cancelColor: '#333',
                confirmColor: '#1483FE',
                content: '确认删除吗?',
                success(res) {
                    if (res.confirm) {
                        that.setData({
                            imageList: imageLists,
                        })
                        that.triggerEvent('change', imageList)
                    } else if (res.cancel) {
                        console.log('用户点击取消')
                    }
                }
            })
        },
        /**
     * 预览图片
     */
        previewImg(e) {
            var currIUrl = e.currentTarget.dataset.item
            var photoList = this.data.imageList
            if (currIUrl) {
                wx.previewImage({
                    current: currIUrl,
                    urls: photoList
                })
            }
        },
    }
})

页面wxss

/* component/uploadImage/uploadImage.wxss */
.pic_content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    padding: 30rpx;
}

.pic_content .image {
    width: 240rpx;
    height: 240rpx;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    color: #666;
    background: #F7F8FA;
    position: relative;
}

.pic_content .image .pic {
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
}

.pic_content .image .icon_close {
    position: absolute;
    top: 0;
    right: 0;
    width: 40rpx;
    height: 40rpx;
}

.pic_content .chooseImage {
    width: 240rpx;
    height: 240rpx;
    border-radius: 10rpx;
    color: #666;
    background: #F7F8FA;
    border-radius: 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pic_content .chooseImage image {
    width: 56rpx;
    height: 56rpx;
    margin-bottom: 16rpx;
}

.pic_content .chooseImage .count {
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
    letter-spacing: 0;
    line-height: 36rpx;
}