feat(Uplaoder): add image-fit prop (#4189)

src/uploader/README.md

@@ -125,6 +125,7 @@ export default {
 | max-count | Max count of image | `number` | - |
 | result-type | Type of file read result, can be set to `dataUrl` `text` | `string` | `dataUrl` |
 | upload-text | Upload text | `string` | - |
+| image-fit | Preview image fit mode | `string` | `cover` | 2.1.5 |
 
 ### Events
 

src/uploader/README.zh-CN.md

@@ -129,8 +129,8 @@ export default {
 |------|------|------|------|------|
 | name | 标识符，可以在回调函数的第二项参数中获取 | `string | number` | - | 2.0.3 |
 | accept | 接受的文件类型 | `string` | `image/*` | - |
-| preview-image | 是否在上传完成后展示预览图 | `boolean` | `true` | 2.0.0 |
 | preview-size | 预览图和上传区域的尺寸，默认单位为`px` | `string | number` | `80px` | 2.0.0 |
+| preview-image | 是否在上传完成后展示预览图 | `boolean` | `true` | 2.0.0 |
 | multiple | 是否开启图片多选，部分安卓机型不支持 | `boolean` | `false` | 2.0.0 |
 | disabled | 是否禁用文件上传 | `boolean` | `false` | - |
 | capture | 图片选取模式，可选值为`camera`(直接调起摄像头) | `string` | - | 2.0.0 |
@@ -141,6 +141,7 @@ export default {
 | max-count | 文件上传数量限制 | `number` | - | 2.0.0 |
 | result-type | 文件读取结果类型，可选值为`text` | `string` | `dataUrl` | - |
 | upload-text | 上传区域文字提示 | `string` | - | 2.0.0 |
+| image-fit | 预览图裁剪模式，可选值见 [Image](#/zh-CN/image) 组件 | `string` | `cover` | 2.1.5 |
 
 ### Events
 

src/uploader/index.js

@@ -44,6 +44,10 @@ export default createComponent({
       type: Boolean,
       default: true
     },
+    imageFit: {
+      type: String,
+      default: 'cover'
+    },
     resultType: {
       type: String,
       default: 'dataUrl'
@@ -190,7 +194,7 @@ export default createComponent({
         <div class={bem('preview')}>
           {isImageFile(item) ? (
             <Image
-              fit="cover"
+              fit={this.imageFit}
               src={item.content || item.url}
               class={bem('preview-image')}
               width={this.previewSize}

src/uploader/test/__snapshots__/index.spec.js.snap

@@ -59,6 +59,22 @@ exports[`disable preview image 1`] = `
 </div>
 `;
 
+exports[`image-fit prop 1`] = `
+<div class="van-uploader">
+  <div class="van-uploader__wrapper">
+    <div class="van-uploader__preview">
+      <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
+        <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+            <!----></i></div>
+      </div><i class="van-icon van-icon-delete van-uploader__preview-delete">
+        <!----></i>
+    </div>
+    <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+        <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
+  </div>
+</div>
+`;
+
 exports[`max-count prop 1`] = `
 <div class="van-uploader">
   <div class="van-uploader__wrapper">

src/uploader/test/index.spec.js

@@ -185,6 +185,19 @@ it('render preview image', async () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+it('image-fit prop', () => {
+  const wrapper = mount(Uploader, {
+    propsData: {
+      imageFit: 'contain',
+      fileList: [
+        { url: 'https://img.yzcdn.cn/vant/cat.jpeg' }
+      ]
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
 it('disable preview image', async () => {
   const wrapper = mount(Uploader, {
     propsData: {