使用微信小程序版Vant的upload组件上传身份证的样式自定义方案（Css魔改版）

棒棒的唐2026-01-14 10:04

wxml文件：

xml 复制代码

 <van-cell-group>
     <van-cell required title="身份证人像面" label="反面|B面，不能把两面合成一张图片一起上传" title-width="6.5em" class="idcard-uploader">
         <van-uploader name="file_list_b" file-list="{{ file_list_b }}" bind:after-read="afterReadFile" bind:delete="deleteFile" image-fit="aspectFit" accept="image" max-count="1" upload-text="上传人像面" upload-icon="https://www.xxxx.com/test/idcardB.jpg" />
     </van-cell>
     <van-cell required title="身份证国徽面" label="正面|A面，不能把两面合成一张图片一起上传" title-width="6.5em" class="idcard-uploader" border="{{ !1 }}">
         <van-uploader name="file_list_a" file-list="{{ file_list_a }}" bind:after-read="afterReadFile" bind:delete="deleteFile" image-fit="aspectFit" accept="image" max-count="1" upload-text="上传国徽面" upload-icon="https://www.xxxx.com/test/idcardA.jpg" />
     </van-cell>
     <van-cell title-width="6.5em" border="{{ !1 }}">
         <van-button type="default" icon="certificate" bind:click="ocrIdcard" disabled="{{ocr_certificate_disabled}}" block>识别身份证并自动填入信息</van-button>
     </van-cell>
</van-cell-group>

wxss文件：

css 复制代码

.idcard-uploader .van-uploader__upload,
.idcard-uploader .van-image,
.idcard-uploader .van-uploader__preview-image {
    width: 44vw !important;
    height: 110px !important;
}

.idcard-uploader .van-uploader__upload-text {
    margin-top: 8px;
    color: #969799;
    font-size: 12px;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: #FF8C00;
    color: #fff;
    text-align: center;
}

.idcard-uploader .van-uploader__upload,
.idcard-uploader .van-image {
    background: #FDF5E6;
    border-radius: 10px;
    overflow: hidden;
}

.idcard-uploader .van-icon--image,
.idcard-uploader .van-icon__image {
    width: 4em;
    height: 3em;
    -o-object-fit: contain;
    object-fit: contain;
    margin-bottom: 23px;
}

效果图：