[new feature] Uploader: support bind v-model

docs/markdown/changelog.zh-CN.md

@@ -25,9 +25,10 @@
 
 ##### Uploader
 
-- 新增`preview`属性
+- 支持通过`v-model`绑定文件列表
 - 新增`max-count`属性
 - 新增`preview-size`属性
+- 新增`preview-image`属性
 
 
 ### [v2.0.0-beta.3](https://github.com/youzan/vant/tree/v2.0.0-beta.3)

packages/uploader/demo/index.vue

@@ -1,12 +1,19 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-uploader preview />
+      <van-uploader :after-read="afterRead" />
+    </demo-block>
+
+    <demo-block :title="$t('preview')">
+      <van-uploader
+        v-model="fileList"
+        multiple
+      />
     </demo-block>
 
     <demo-block :title="$t('maxCount')">
       <van-uploader
-        preview
+        v-model="fileList2"
         multiple
         :max-count="2"
       />
@@ -30,14 +37,29 @@ export default {
   i18n: {
     'zh-CN': {
       upload: '上传图片',
-      maxCount: '上传数量限制',
+      preview: '图片预览',
+      maxCount: '限制上传数量',
       uploadStyle: '自定义上传样式'
     },
     'en-US': {
       upload: 'Upload Image',
+      preview: 'Preview Image',
       maxCount: 'Max Count',
       uploadStyle: 'Upload Style'
     }
+  },
+
+  data() {
+    return {
+      fileList: [],
+      fileList2: []
+    };
+  },
+
+  methods: {
+    afterRead(file) {
+      console.log(file);
+    }
   }
 };
 </script>

packages/uploader/en-US.md

@@ -13,7 +13,7 @@ Vue.use(Uploader);
 ### Basic Usage
 
 ```html
-<van-uploader preview :after-read="afterRead" />
+<van-uploader :after-read="afterRead" />
 ```
 
 ```javascript
@@ -26,16 +26,42 @@ export default {
 };
 ```
 
+### Preview Image
+
+```html
+<van-uploader v-model="fileList" multiple />
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      fileList: []
+    }
+  }
+};
+```
+
 ### Max Count
 
 ```html
 <van-uploader
-  preview
+  v-model="fileList"
   multiple
   :max-count="2"
 />
 ```
 
+```javascript
+export default {
+  data() {
+    return {
+      fileList: []
+    }
+  }
+};
+```
+
 ### Upload Style
 
 ```html
@@ -52,7 +78,7 @@ export default {
 |------|------|------|------|
 | name | Input name | `String` | - |
 | accept | Accepted file type | `String` | `image/*` |
-| preview | Whether to show image preview | `Boolean` | `false` |
+| preview-image | Whether to show image preview | `Boolean` | `true` |
 | preview-size | Size of preview image | `String | Number` | `80px` |
 | multiple | Whether to enable multiple selection pictures | `Boolean` | `false` |
 | disabled | Whether to disabled the upload | `Boolean` | `false` |

packages/uploader/index.js

@@ -7,13 +7,21 @@ const [sfc, bem] = use('uploader');
 export default sfc({
   inheritAttrs: false,
 
+  model: {
+    prop: 'fileList'
+  },
+
   props: {
-    preview: Boolean,
+    fileList: Array,
     disabled: Boolean,
     uploadText: String,
     afterRead: Function,
     beforeRead: Function,
     previewSize: [Number, String],
+    previewImage: {
+      type: Boolean,
+      default: true
+    },
     accept: {
       type: String,
       default: 'image/*'
@@ -32,12 +40,6 @@ export default sfc({
     }
   },
 
-  data() {
-    return {
-      uploadedFiles: []
-    };
-  },
-
   computed: {
     detail() {
       return {
@@ -62,7 +64,7 @@ export default sfc({
       }
 
       if (Array.isArray(files)) {
-        const maxCount = this.maxCount - this.uploadedFiles.length;
+        const maxCount = this.maxCount - this.fileList.length;
         files = files.slice(0, maxCount);
 
         Promise.all(files.map(this.readFile)).then(contents => {
@@ -109,21 +111,20 @@ export default sfc({
         return;
       }
 
-      if (Array.isArray(files)) {
-        files.forEach(this.addPreviewImage);
-      } else {
-        this.addPreviewImage(files);
-      }
+      this.resetInput();
+      this.updateFileList(files);
 
       if (this.afterRead) {
         this.afterRead(files, this.detail);
       }
-
-      this.resetInput();
     },
 
-    addPreviewImage(file) {
-      this.uploadedFiles.push(file);
+    updateFileList(files) {
+      if (!Array.isArray(files)) {
+        files = [files];
+      }
+
+      this.$emit('input', [...this.fileList, ...files]);
     },
 
     resetInput() {
@@ -134,21 +135,23 @@ export default sfc({
     },
 
     renderPreview() {
-      if (this.preview) {
-        return this.uploadedFiles.map(file => (
-          <Image
-            fit="cover"
-            class={bem('preview')}
-            src={file.content}
-            width={this.previewSize}
-            height={this.previewSize}
-          />
-        ));
+      if (!this.previewImage) {
+        return;
       }
+
+      return this.fileList.map(file => (
+        <Image
+          fit="cover"
+          class={bem('preview')}
+          src={file.content}
+          width={this.previewSize}
+          height={this.previewSize}
+        />
+      ));
     },
 
     renderUpload() {
-      if (this.uploadedFiles.length >= this.maxCount) {
+      if (this.fileList.length >= this.maxCount) {
         return;
       }
 

packages/uploader/test/__snapshots__/demo.spec.js.snap

@@ -18,6 +18,14 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div class="van-uploader">
+      <div class="van-uploader__wrapper">
+        <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+            <!----></i><input multiple="multiple" type="file" accept="image/*" class="van-uploader__input"></div>
+      </div>
+    </div>
+  </div>
   <div>
     <div class="van-uploader">
       <div class="van-uploader__wrapper">

packages/uploader/test/index.spec.js

@@ -127,7 +127,12 @@ it('render upload-text', () => {
 it('render preview image', async () => {
   const wrapper = mount(Uploader, {
     propsData: {
-      preview: true
+      fileList: []
+    },
+    listeners: {
+      input(fileList) {
+        wrapper.setProps({ fileList });
+      }
     }
   });
 
@@ -140,8 +145,13 @@ it('render preview image', async () => {
 it('max-count prop', async () => {
   const wrapper = mount(Uploader, {
     propsData: {
-      preview: true,
+      fileList: [],
       maxCount: 1
+    },
+    listeners: {
+      input(fileList) {
+        wrapper.setProps({ fileList });
+      }
     }
   });
 
@@ -154,8 +164,13 @@ it('max-count prop', async () => {
 it('preview-size prop', async () => {
   const wrapper = mount(Uploader, {
     propsData: {
-      preview: true,
+      fileList: [],
       previewSize: 30
+    },
+    listeners: {
+      input(fileList) {
+        wrapper.setProps({ fileList });
+      }
     }
   });
 

packages/uploader/zh-CN.md

@@ -12,34 +12,63 @@ Vue.use(Uploader);
 
 ### 基础用法
 
-图片上传完毕后会触发`after-read`传入的回调函数，获取到对应的`file`对象
+图片上传完毕后会触发`after-read`回调函数，获取到对应的`file`对象
 
 ```html
-<van-uploader preview :after-read="afterRead" />
+<van-uploader :after-read="afterRead" />
 ```
 
 ```javascript
 export default {
   methods: {
     afterRead(file) {
-      console.log(file)
+      // 此时可以自行将文件上传至服务器
+      console.log(file);
     }
   }
 };
 ```
 
-### 上传数量限制
+### 图片预览
 
-通过`max-count`属性可以限制上传图片的数量。上传数量达到限制后，会自动隐藏上传区域
+通过`v-model`可以绑定已经上传的图片列表，并展示图片列表的预览图
+
+```html
+<van-uploader v-model="fileList" multiple />
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      fileList: []
+    }
+  }
+};
+```
+
+### 限制上传数量
+
+通过`max-count`属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域
 
 ```html
 <van-uploader
-  preview
+  v-model="fileList"
   multiple
   :max-count="2"
 />
 ```
 
+```javascript
+export default {
+  data() {
+    return {
+      fileList: []
+    }
+  }
+};
+```
+
 ### 自定义上传样式
 
 通过插槽可以自定义上传区域的样式
@@ -58,7 +87,7 @@ export default {
 |------|------|------|------|------|
 | name | 标识符，可以在回调函数的第二项参数中获取 | `String` | - | 1.6.13 |
 | accept | 接受的文件类型 | `String` | `image/*` | - |
-| preview | 是否在上传完成后展示预览图 | `Boolean` | `false` | 2.0.0 |
+| preview-image | 是否在上传完成后展示预览图 | `Boolean` | `true` | 2.0.0 |
 | preview-size | 预览图和上传区域的尺寸，单位为`px` | `String | Number` | `80px` | 2.0.0 |
 | multiple | 是否开启图片多选，部分安卓机型不支持 | `Boolean` | `false` | 2.0.0 |
 | disabled | 是否禁用图片上传 | `Boolean` | `false` | - |