jobslink-user-clent/pages/recruit/subPage/enterpriceCertification/uploadIdNumber.vue

<template>
    <view class="content_upload" :style="contentStyle">
        <u-upload :fileList="ImgUrl" @afterRead="afterRead" :deletable="true" @delete="deletePic" name="6" :maxCount="1"
            :width="width" :height="height">
            <image :src="backImg" :style="`width: ${width}px;height: ${height}px;`"></image>
            <image class="iconimg" src="/static/img/Takingpictures.png"
                :style="`width: ${width/4}px;height: ${width/4}px;`"></image>
        </u-upload>
    </view>
</template>

<script>
    import {
        uploadFile
    } from '@/api/upload.js'
    export default {
        name: 'UploadIdNumber',
        props: {
            backImg: {
                type: String,
                require: true,
            },
            value: {
                type: String,
                default: null
            },
            width: {
                type: Number,
                default: 280
            },
            height: {
                type: Number,
                default: 150
            },
            contentStyle: {
                type: String,
                default: ''
            }
        },
        computed: {
            ImgUrl(val) {
                return this.value ? [{
                    name: 'img.jpg',
                    url: this.value
                }] : []
            }
        },
        methods: {
            afterRead({
                file,
                index,
                name
            }) {
                // this.$emit("input", file);
                uploadFile(file).then((url) => {
                    this.$emit("input", url);
                })
            },
            deletePic() {
                this.$emit("input", null);
            },
        }
    }
</script>

<style scoped>
    .content_upload {
        position: relative;
    }

    .iconimg {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>