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) {
                if (this.value) {
                    const url = this.value.split('|')
                    return [{
                        name: 'img',
                        url: url[url.length - 1]
                    }]
                } else {
                    return []
                }
            }
        },
        methods: {
            afterRead({
                file,
                index,
                name
            }) {
                // this.$emit("input", file);
                uploadFile(file).then((fileObj) => {
                    const {
                        id,
                        path
                    } = fileObj.data
                    const url = `${id}|${path}$`
                    console.log(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>