图片上传区 -组件封装

1.效果

2.代码

<template>
    <view>
        <view class="uni-common-mt">
            <view class="uni-uploader" v-if="imageListAreaShow">
                <view class="uni-uploader-head">
                    <view class="uni-uploader-title">点击可预览选好的图片</view>
                    <view class="uni-uploader-info">{{ imageList.length }}/9</view>
                </view>
                <view class="uni-uploader-body">
                    <view class="uni-uploader__files">
                        <!-- 显示的已上传区 -->
                        <block v-for="(image, index) in imageList" :key="index">
                            <view class="uni-uploader__file  position-relative">
                                <image class="uni-uploader__img rounded" :src="image" :data-src="image" @tap="previewImage" mode="aspectFill"></image>
                                
                                <!-- 图片删除按钮 -->
                                <view class=" position-absolute top-0 right-0 p-10 rounded text-light-black" @click.stop="deleteImage(index)">
                                    <text class="iconfont icon-guanbi text-white"></text>
                                </view>
                            </view>
                        </block>

                        <!-- 待上传区 -->
                        <view class="uni-uploader__input-box rounded"><view class="uni-uploader__input" @tap="chooseImage"></view></view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import permision from '@/static/js/permission.js';
var sourceType = [['camera'], ['album'], ['camera', 'album']];
var sizeType = [['compressed'], ['original'], ['compressed', 'original']];
export default {
    props:{
        draftImageList:Array,
        imageListAreaShow:{
            type:Boolean,
            default:true
        }
    },
    data() {
        return {
            title: 'choose/previewImage',
            imageList: [],
            sourceTypeIndex: 2,
            sourceType: ['拍照', '相册', '拍照或相册'],
            sizeTypeIndex: 2,
            sizeType: ['压缩', '原图', '压缩或原图'],
            countIndex: 8,
            count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
        };
    },
    mounted() {
        this.imageList=this.draftImageList
    },
    onUnload() {
        (this.imageList = []),
            (this.sourceTypeIndex = 2),
            (this.sourceType = ['拍照', '相册', '拍照或相册']),
            (this.sizeTypeIndex = 2),
            (this.sizeType = ['压缩', '原图', '压缩或原图']),
            (this.countIndex = 8);
    },
    methods: {
        // 删除图片
        deleteImage(index) {
            uni.showModal({
                title: '提示',
                content: '是否要删除该图片？',
                showCancel: true,
                cancelText: '取消',
                confirmText: '删除',
                success: res => {
                    if (res.confirm) {
                        this.imageList.splice(index, 1);
                        this.$emit('changeImage', this.imageList);
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },
        sourceTypeChange: function(e) {
            this.sourceTypeIndex = parseInt(e.detail.value);
        },
        sizeTypeChange: function(e) {
            this.sizeTypeIndex = parseInt(e.detail.value);
        },
        countChange: function(e) {
            this.countIndex = e.detail.value;
        },
        chooseImage: async function() {
            // #ifdef APP-PLUS
            // TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
            if (this.sourceTypeIndex !== 2) {
                let status = await this.checkPermission();
                if (status !== 1) {
                    return;
                }
            }
            // #endif

            if (this.imageList.length === 9) {
                let isContinue = await this.isFullImg();
                console.log('是否继续?', isContinue);
                if (!isContinue) {
                    return;
                }
            }
            uni.chooseImage({
                sourceType: sourceType[this.sourceTypeIndex],
                sizeType: sizeType[this.sizeTypeIndex],
                count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
                success: res => {
                    this.imageList = this.imageList.concat(res.tempFilePaths);
                    this.$emit('changeImage', this.imageList);
                },
                fail: err => {
                    // #ifdef APP-PLUS
                    if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
                        this.checkPermission(err.code);
                    }
                    // #endif
                    // #ifdef MP
                    if (err.errMsg.indexOf('cancel') !== '-1') {
                        return;
                    }
                    uni.getSetting({
                        success: res => {
                            let authStatus = false;
                            switch (this.sourceTypeIndex) {
                                case 0:
                                    authStatus = res.authSetting['scope.camera'];
                                    break;
                                case 1:
                                    authStatus = res.authSetting['scope.album'];
                                    break;
                                case 2:
                                    authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
                                    break;
                                default:
                                    break;
                            }
                            if (!authStatus) {
                                uni.showModal({
                                    title: '授权失败',
                                    content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
                                    success: res => {
                                        if (res.confirm) {
                                            uni.openSetting();
                                        }
                                    }
                                });
                            }
                        }
                    });
                    // #endif
                }
            });
        },
        isFullImg: function() {
            return new Promise(res => {
                uni.showModal({
                    content: '已经有9张图片了,是否清空现有图片？',
                    success: e => {
                        if (e.confirm) {
                            this.imageList = [];
                            res(true);
                        } else {
                            res(false);
                        }
                    },
                    fail: () => {
                        res(false);
                    }
                });
            });
        },
        previewImage: function(e) {
            var current = e.target.dataset.src;
            uni.previewImage({
                current: current,
                urls: this.imageList
            });
        },
        async checkPermission(code) {
            let type = code ? code - 1 : this.sourceTypeIndex;
            let status = permision.isIOS
                ? await permision.requestIOS(sourceType[type][0])
                : await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' : 'android.permission.READ_EXTERNAL_STORAGE');

            if (status === null || status === 1) {
                status = 1;
            } else {
                uni.showModal({
                    content: '没有开启权限',
                    confirmText: '设置',
                    success: function(res) {
                        if (res.confirm) {
                            permision.gotoAppSetting();
                        }
                    }
                });
            }

            return status;
        }
    }
};
</script>

<style>
.cell-pd {
    padding: 22rpx 30rpx;
}

.list-pd {
    margin-top: 50rpx;
}
</style>