uniapp 上传删除预览图片

上传图片组件 UploadImg.vue

//UploadImg.vue
<template>
    <!--            上传附件-->
    <view class="comment-image-style">
        <view class="img" v-if="imgArr.length === 0 ">
            <u-image width="100%" height="100%" src="/static/icon/upload.png"
                     alt="upload"
                     @click="uploadImg"></u-image>
        </view>

        <view class="imgBox-style">
            <view class="flex-item-style" v-for="(item,index) in imgArr" :key="index"
            >
                <view v-if="show" style="width:0;height:0;">
                    <u-icon class="icon-style" name="close-circle" color="#EF0000" size="28"
                            @click="deleteImg(index)"
                    ></u-icon>
                </view>
                <view>
                    <u-image class="u-m-20" width="150rpx" height="150rpx" :src="item"
                             @click="previewImage(index)">
                    </u-image>
                </view>
            </view>
            <view class="img" v-if="(imgArr.length > 0 && imgArr.length < 9 && show)">
                <u-image width="100%" height="100%" src="/static/icon/upload.png"
                         alt="addImg"
                         @click="addImg">
                </u-image>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: '',
        props: {
            imgArr: {
                type: Array
            },
            show: {
                type: Boolean
            }
        },
        data() {
            return {};
        },
        computed: {},
        watch: {},
        methods: {
            uploadImg() {
                this.$emit('uploadImg');
            },
            addImg() {
                this.$emit('addImg');
            },
            deleteImg(index) {
                this.$emit('deleteImg', index);
            },
            previewImage(index) {
                this.$emit('previewImage', index);
            }
        }
    };
</script>

<style lang="scss" scoped>

    .comment-image-style {
        height: 100%;
        width: 100%;
    }

    .img {
        margin: 20rpx;
        width: 150rpx;
        height: 150rpx
    }

    .imgBox-style {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: start;
        text-align: center;
        width: 100%;

        .flex-item-style {
            width: 25%;
        }

        .icon-style {
            position: relative;
            right: -140rpx;
            top: 16rpx;
            z-index: 999;
        }
    }
</style>

方法

//上传图片
   uploadImg() {
                uni.chooseImage({
                    count: 9,
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album'],
                    success: (res) => {
                        this.imgArr = res.tempFilePaths;
                    },
                    fail: (res) => {
                        console.log(res);
                    }
                });
            },
//添加图片
            addImg() {
                uni.chooseImage({
                    count: 9 - this.imgArr.length,
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album'],
                    success: (res) => {
                        this.imgArr = this.imgArr.concat(res.tempFilePaths);
                    },
                    fail: (res) => {
                        console.log(res);
                    }
                });
            },
//删除图片
            deleteImg(index) {
                uni.showModal({
                    title: '提示',
                    content: '是否要删除此图片？',
                    success: (res) => {
                        if (res.confirm) {
                            this.imgArr.splice(index, 1);
                        }
                    }
                });
            },
//预览图片
            previewImage(index) {
                uni.previewImage({
                    current: index,
                    urls: this.imgArr
                });
            }

标签：uniapp,style,预览,index,上传,previewImage,flex,res,imgArr
来源： https://www.cnblogs.com/beiyi-Lin/p/15816475.html