Files
jobslink-user-clent/pages/recruit/subPage/enterpriceCertification/uploadIdNumber.vue
2025-08-05 18:28:07 +08:00

87 lines
1.9 KiB
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: height / 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>