leromro-mini/pages_home/components/updata-imgs/index.vue

<template>
    <view class="updata-img">
        <view class="updata-title-box">
            <view class="updata-title-title font-title ">{{ data.title }} <span style="color: #f56c6c;"
                    v-if="data.required">*</span> </view>
            <view class="updata-title-text font-text ">{{ data.text }}</view>
        </view>

        <view class="upload-box">
            <view class="upload-img-item" v-for="(item, index) in fileList" :key="item.url"  >
                <view class="delete-icon" @click="deletePic(index)">
                    <up-icon name="close-circle-fill" color="#f64a1f"
                        size="18"></up-icon>
                </view>
                <!-- <img class="upload-img" :src="item.url" :alt="item.fileName" srcset=""> -->
                <up-image :src="item.url" class="upload-img" mode="widthFix"></up-image>
            </view>
            <!-- <img src="/static/img/upload.png" alt="" class="upload-img" @click="uploadClick('img')"
                v-if="fileList.length < fileCount"> -->
                <view v-if="fileList.length < fileCount"  @click="uploadClick('img')" class="updata-bg-view">
                    <up-icon name="plus" color="#999999" size="28"></up-icon>
                    <text class="updata-dece">{{ data.dece }}</text>
                </view>
        </view>
    </view>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { wxUploadFile } from '@/utils/wxRequest.js'

const props = defineProps({
    data: {
        type: Object,
        default: {
            title: '上传头像',
            text: '上传您的头像',
            img: "/static/img/updata-user-img.png",
            dece:'点击上传文件'
        },
    },
    fileList: {
        type: String,
        default: ''

    },
    fileCount: {
        type: Number,
        default: 1
    }
});
const emit = defineEmits(['onSubmit']);


const fileList = ref([]);

// 删除图片
const deletePic = (index) => {
	
    fileList.value = fileList.value.filter((item, i) => i !== index).filter(Boolean);
	console.log("TCL: deletePic -> fileList.value", fileList.value)
    getFile();
};
const uploadClick = async (type) => {
    const res = await wxUploadFile(type,props.fileCount);
    fileList.value = [...fileList.value, ...res];
    getFile();
    console.log('xxxxres', res, fileList.value);
}

function getFile() {
    const img_urls = fileList.value.map(item => item.url).join(',');
    console.log('img_urls',img_urls);
    emit('onSubmit', { key: props.data.key, url: img_urls })
    return img_urls
}

function setFile(files){
    const files_array = files.split(',').filter(Boolean);
    const arr_file = files_array.map(item=> {
        return {url:item}
    })
    console.log('fileList',arr_file);
    fileList.value = arr_file
}
watch(()=>props.fileList,()=>{
    setFile(props.fileList);
})

defineExpose({
    getFile,
    setFile
});
</script>

<style lang="scss" scoped>
.updata-img {
    border-radius: 8px;
    background: rgba(255, 255, 255, 1);
    // height: 100px;
    padding: 16px;

    display: flex;
    align-content: center;
    justify-content: space-between;
    flex-direction: column;

    .updata-title-box {
        display: flex;
        align-content: center;
        flex-direction: column;
        justify-content: space-evenly;
        margin-bottom: 12px;
    }
}

.upload-img {
    height: 68px;
    width: 68px;
    margin-right: 12px;
    margin-bottom: 12px;
    object-fit: contain;
}

.upload-box {
    display: flex;
    flex-wrap: wrap;

    .upload-img-item {
        position: relative;
        width: 100%;
        display: flex;
    align-items: center;
    justify-content: center;

        .delete-icon {
            position: absolute;
            top: -7px;
            right: -10px;
            z-index: 1;
        }
    }
}

.updata-bg-view {
    width: 700rpx;
    height: 256rpx;
    border-radius: 16rpx;
    background: rgba(245, 245, 245, 1);

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    font-size: 28rpx;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    .updata-dece {
        margin-top: 12rpx;
    }
}
</style>