uniapp 上传删除预览图片

Posted 2022-01-18 1940

上传图片组件 UploadImg.vue

//UploadImg.vue
<template>
    <!--            上传附件-->
    <view class="comment-image-style">
        <view class="img" v-if="imgArr.length === 0 ">
            <u-image   src="/static/icon/upload.png"
                     
                     @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"   :src="item"
                             @click="previewImage(index)">
                    </u-image>
                </view>
            </view>
            <view class="img" v-if="(imgArr.length > 0 && imgArr.length < 9 && show)">
                <u-image   src="/static/icon/upload.png"
                         
                         @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
                );
            

本文来自博客园，作者：1940，转载请注明原文链接：https://www.cnblogs.com/beiyi-Lin/p/15816475.html