caimei-applets-mcare/pages/goods/components/upload.vue

<template>
    <view>
        <view class="upload" @click="handlerUpload" v-if="imageUrl==null || imageUrl == ''">
            <text class="iconfont icon-shangchuantupian"></text>
            <text>选择图片</text>
        </view>
        <view class="upload_image" v-else>
            <image :src="imageUrl" style="width: 100%;height: 100%;" mode="aspectFill"></image>
            <view class="upload-del" @click="handleDelete">
            	<text class="iconfont icon-shanchu"></text>
            </view>
        </view>
    </view>
</template>

<script>
    import { uploadFileImage } from '@/services/public.js'
    export default {
        props: {
            imageData: {
                type: String,
                default: () => ''
            }
        },
        data() {
            return {
                imageUrl: '',
            }
        },
        watch: {
            imageData(val) {
                if (val) {
                    this.imageUrl = val
                }
            }
        },
        methods: {
            async handlerUpload() {
                try{
                    const {data} = await uploadFileImage()
                    this.imageUrl = JSON.parse(data).data
                    this.$emit('uploadImg', JSON.parse(data).data)
                }catch(error){
                    console.log(error)
                }
            },
            handleDelete() {
                this.imageUrl = ''
                this.$emit('uploadDel', '')
            },
        }
    }
</script>

<style scoped lang="scss">
    .upload {
        width: 210rpx;
        height: 210rpx;
        border-radius: 6rpx 6rpx 6rpx 6rpx;
        border: 1rpx dotted #B2B2B2;
        display: flex;
        align-items: center;
        flex-direction: column;
        font-size: 24rpx;
        color: #B2B2B2;
        justify-content: space-around;
        padding: 40rpx 56rpx;
        box-sizing: border-box;
        white-space: nowrap;
    }
    .upload_image {
        width: 210rpx;
        height: 210rpx;
        border: 1rpx dotted #B2B2B2;
        position: relative;
        .upload-del {
        	width: 40rpx;
        	height: 40rpx;
        	position: absolute;
        	top: -20rpx;
        	right: -20rpx;
        	line-height: 40rpx;
        	text-align: center;
        	.iconfont {
        		font-size: $font-size-40;
        		color: #F85050;
        	}
        }
    }
</style>