[new feature] Uploader: add name prop (#3096)

packages/uploader/demo/index.vue

@@ -12,6 +12,17 @@
       </div>
     </demo-block>
 
+    <demo-block :title="$t('name')">
+      <div class="demo-uploader-container">
+        <van-uploader
+          name="uploader"
+          :after-read="toastName"
+        >
+          <van-icon name="photograph" />
+        </van-uploader>
+      </div>
+    </demo-block>
+
     <demo-block :title="$t('title2')">
       <div class="demo-uploader-container">
         <van-uploader
@@ -31,10 +42,12 @@
 export default {
   i18n: {
     'zh-CN': {
+      name: '标识名称',
       title2: '设置 input 属性'
     },
     'en-US': {
-      title2: 'Set input attr'
+      name: 'Name',
+      title2: 'Set input attrs'
     }
   },
 
@@ -47,6 +60,10 @@ export default {
       return file => {
         console.log(index, file);
       };
+    },
+
+    toastName(file, detail) {
+      this.$toast(detail.name);
     }
   }
 };

packages/uploader/en-US.md

@@ -29,7 +29,26 @@ export default {
 };
 ```
 
-#### Set input attr
+#### Name
+
+```html
+<van-uploader name="uploader" :after-read="onRead">
+  <van-icon name="photograph" />
+</van-uploader>
+```
+
+```javascript
+export default {
+  methods: {
+    onRead(file, detail) {
+      this.$toast(detail.name);
+    }
+  }
+};
+```
+
+#### Set input attrs
+
 You can set native properties such as `accpet`、`multiple` on Uploader, and the input will automatically inherits the attribute.
 
 ```html
@@ -42,6 +61,7 @@ You can set native properties such as `accpet`、`multiple` on Uploader, and the
 
 | Attribute | Description | Type | Default |
 |------|------|------|------|
+| name | Input name | `String` | - |
 | result-type | Type of file read result, can be set to `dataUrl` `text` | `String` | `dataUrl` |
 | accept | Accepted file type | `String` | `image/*` |
 | disabled | Whether to disabled the upload | `Boolean` | `false` |
@@ -61,9 +81,9 @@ You can set native properties such as `accpet`、`multiple` on Uploader, and the
 |------|------|
 | - | Custom icon |
 
-### afterRead Parematers
+### Parematers of before-read、after-read
 
 | Attribute | Description | Type |
 |------|------|------|
-| file | file object | `Object` |
+| file | File object | `Object` |
-| content | file content | `String` |
+| detail | Detail info | `Object` |

packages/uploader/index.js

@@ -23,6 +23,14 @@ export default sfc({
     }
   },
 
+  computed: {
+    detail() {
+      return {
+        name: this.$attrs.name || ''
+      };
+    }
+  },
+
   methods: {
     onChange(event) {
       let { files } = event.target;
@@ -31,7 +39,7 @@ export default sfc({
       }
 
       files = files.length === 1 ? files[0] : [].slice.call(files, 0);
-      if (!files || (this.beforeRead && !this.beforeRead(files))) {
+      if (!files || (this.beforeRead && !this.beforeRead(files, this.detail))) {
         this.resetInput();
         return;
       }
@@ -82,7 +90,7 @@ export default sfc({
       if (oversize) {
         this.$emit('oversize', files);
       } else {
-        this.afterRead && this.afterRead(files);
+        this.afterRead && this.afterRead(files, this.detail);
       }
       this.resetInput();
     },

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

@@ -8,6 +8,12 @@ exports[`renders demo correctly 1`] = `
           <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
     </div>
   </div>
+  <div>
+    <div class="demo-uploader-container">
+      <div class="van-uploader"><i class="van-icon van-icon-photograph">
+          <!----></i><input name="uploader" type="file" accept="image/*" class="van-uploader__input"></div>
+    </div>
+  </div>
   <div>
     <div class="demo-uploader-container">
       <div class="van-uploader"><i class="van-icon van-icon-photograph">

packages/uploader/test/index.spec.js

@@ -48,6 +48,24 @@ it('read text', done => {
   wrapper.vm.onChange(file);
 });
 
+it('set input name', done => {
+  const wrapper = mount(Uploader, {
+    propsData: {
+      name: 'uploader',
+      beforeRead: (readFile, detail) => {
+        expect(detail.name).toEqual('uploader');
+        return true;
+      },
+      afterRead: (readFile, detail) => {
+        expect(detail.name).toEqual('uploader');
+        done();
+      }
+    }
+  });
+
+  wrapper.vm.onChange(file);
+});
+
 it('unknown resultType', () => {
   const afterRead = jest.fn();
   const wrapper = mount(Uploader, {

packages/uploader/zh-CN.md

@@ -27,7 +27,26 @@ export default {
 };
 ```
 
+#### 标识名称
+
+```html
+<van-uploader name="uploader" :after-read="onRead">
+  <van-icon name="photograph" />
+</van-uploader>
+```
+
+```javascript
+export default {
+  methods: {
+    onRead(file, detail) {
+      this.$toast(detail.name);
+    }
+  }
+};
+```
+
 #### 设置 Input 属性
+
 可以直接在 Uploader 上设置 accpet、multiple 等原生属性，input 会自动继承该属性
 
 ```html
@@ -40,6 +59,7 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
+| name | 标识符，可以在回调函数的第二项参数中获取 | `String` | - | 1.6.13 |
 | result-type | 文件读取结果类型，可选值为 `text` | `String` | `dataUrl` | - |
 | accept | 接受的文件类型 | `String` | `image/*` | - |
 | disabled | 是否禁用图片上传 | `Boolean` | `false` | - |
@@ -59,9 +79,9 @@ export default {
 |------|------|
 | - | 自定义 uploader 内容 |
 
-### after-read 回调参数
+### before-read、after-read 回调参数
 
 | 参数名 | 说明 | 类型 |
 |------|------|------|
 | file | 文件解析后的 file 对象 | `Object` |
-| content | 文件内容 | `String` |
+| detail | 额外信息，包含 name 字段 | `Object` |