uniapp上传多张图片 预览 删除 功能实现 如下图

删除和添加的图片自行下载

<template>
    <view>
     <!-- 照片展示 -->
            <view class="img-box">
                <view class="img-box-top">
                    <text class="list-star">*</text>
                    <view style="font-size: 32rpx;">照片展示</view>
                    <text class="img-txt">（建议图片大小不要超过2M）</text>
                </view>
                <!-- 图片 -->
                <view class="imgs-list">
                    <view class="goods-box">
                        <view class="imgList" v-for="(item, key) in fileList" :key="key">
                            <image class="del" src="../../static/tabar/shanchu.png" @click="delImage(key)"></image> 
                            <image class="imgList" :src="item" @click="previewImg(fileList,key)"></image>
                        </view>

                        <image class="imgList" src="../../static/tabar/tianjiatupian.png" @click="addImage"></image>
                    </view>

                </view>
            </view>
      </view>
</template>
<script>
 export default {
     data() {
            return {        
                imglist: [],
                fileList: [], // 存储图片的数组，
                urlStr: "", //  后端返回的图片数据拼接

                   }
             },

         methods:{
              
              // 新增图片 
            addImage() {
                const max = 6; //上传图片数量
                const count = max - this.fileList.length
                uni.chooseImage({
                    count: count, // 上传图片最多6个可以自己调
                    success: (res) => {
                        this.fileList = [...this.fileList, ...res.tempFilePaths]
                    }
                })
            },

            // 删除图片
            delImage(id) {
                this.fileList.splice(id, 1)
            },
            // 预览图片功能
            previewImg(urls, i) {
                // console.log(urls);
                uni.previewImage({
                    urls, //所有要预览的图片的地址集合 必须数组形式 
                    current: urls[i] //当前图片地址,点击预览哪个预览的哪个传的 i 是索引
                })
            },

            //  如果需要上传后台 仅供参考
            async upload() {
                // console.log(this.fileList, '555555555555555');
                for (let i = 0; i < this.fileList.length; i++) {
                    let item = this.fileList[i];
                    console.log(item);

                    let p = await this.requestMessage(item); //调用封装的上传图片方法

                    // console.log(p,'自己项目后端服务器返回的网络图片地址');
                     
                    this.imglist.push(p)  //后端服务器返回的网络图片地址拼接为数组（个人项目需要）

                }

            },

            // 处理图片 如果需要上传后台 仅供参考
            requestMessage(item) {
                return new Promise((resolve, reject) => {
                    uni.uploadFile({
                        url: '自己后端服务器的地址', //这个是你服务上的php用来处理图片上传的路径（可var_dump($_FILE)出来看看）
                        filePath: item,
                        name: 'image',
                        fileType: 'image',
                        formData: {
                            token: uni.getStorageSync('token')
                        },
                        success: function(res) {
                             //成功回调函数
                            // console.log('this', JSON.parse(res.data).data)
                            let imgss = JSON.parse(res.data).data
                            
                            resolve(imgss);//将结果返回出去
                        },
                        fail: function(e) {
                            uni.showToast({
                                title: '上传失败',
                                icon: 'loading',
                                duration: 2000
                            })
                        },
                        complete: function() {
                            uni.hideToast(); //隐藏Toast
                            uni.showToast({
                                title: '上传成功',
                                icon: 'success',
                                duration: 2000
                            })

                        }
                    })
                })
            },
 }
      








           }

</script>
<style scoped lang="scss">
    .goods-box {
        display: flex;
        flex-wrap: wrap;

        // 图片列表
        .imgList {
            position: relative;
            width: 180rpx;
            height: 180rpx;
            margin: 0 47rpx 30rpx 0;
        }

        // 删除图片
        .del {
            position: absolute;
            width: 60rpx;
            height: 60rpx;
            right: 15rpx;
            z-index: 999;
        }
    }
    /* 图片 */
    .img-box {
        padding: 34rpx 0 35rpx 23rpx;
        margin-top: 24rpx;
        background: #FFFFFF;
        border-radius: 10rpx;
    }

    .imgs {
        width: 10rpx;
        height: 10rpx;
    }

    .img-box-top {
        display: flex;
        font-size: 28rpx;
    }

    .img-txt {
        font-size: 24rpx;
        color: #959595;
        margin-left: 15rpx;
    }

    .imgs-list {
        display: flex;
        margin-top: 35rpx;
    }

    .showLoadImg {
        position: relative;
    }

    .upLoadImg-img {
        width: 122rpx;
        height: 122rpx;
    }

    .group image {
        width: 22rpx;
        height: 22rpx;
    }

    .q-image-remover {
        width: 20rpx;
        position: absolute;
        right: 0rpx;
        top: -15rpx;
        /* z-index: 99; */
    }

    .img-li {
        width: 122rpx;
        height: 122rpx;
        border: 2rpx dashed #959595;
        margin-left: 16rpx;
        border-radius: 10rpx;
    }

    .upLoadImg {
        width: 50rpx;
        height: 50rpx;
        margin: 30rpx 30rpx;
    }

</style>