1 说明

1.1 代码

 <van-uploader 
        file-list="{{ fileList }}"
        deletable="{{ true }}"
        max-count="10"
        multiple  
        accept="image"
        max-size="5242880"
        preview-image="{{true}}"
        bind:delete="deleteImg"
        bind:before-read="beforeRead"
        bind:after-read="afterRead" />
    </view>

1.2 效果

　　想要把下图蓝色部分大小调整下

image

 

2 各种尝试

2.1 使用官方文档提供的属性preview-size

　　发现没有效果

image

 

2.2 使用样式

　　还是没有效果

<!-- 在 WXML 文件中 -->
<van-uploader 
  class="custom-uploader"
  file-list="{{ fileList }}"
  bind:after-read="{{ afterRead }}"
  max-count="5"
/>

 

/* 在对应页面的 WXSS 文件中 */
.custom-uploader .van-uploader__preview-image {
  width: 200rpx;
  height: 150rpx;
  border-radius: 8rpx;
}

/* 或者设置上传区域的尺寸 */
.custom-uploader .van-uploader__upload {
  width: 200rpx;
  height: 150rpx;
}

 

2.3 使用样式强制覆盖

　　终于成功了

/* 在对应页面的 WXSS 文件中 */
/* 强制覆盖 Vant 的默认样式 */
.van-uploader__preview-image {
  width: 180rpx !important;
  height: 180rpx !important;
  border-radius: 20rpx;
}

/* 如果需要设置上传按钮的尺寸 */
.van-uploader__upload {
  width: 180rpx !important;
  height: 180rpx !important;
}

image