# Uploader 图片上传

### 引入

``` javascript
import { Uploader } from 'vant';

Vue.use(Uploader);
```

## 代码演示

### 基础用法

图片上传完毕后会触发`after-read`传入的回调函数，获取到对应的`file`对象

```html
<van-uploader preview :after-read="afterRead" />
```

```javascript
export default {
  methods: {
    afterRead(file) {
      console.log(file)
    }
  }
};
```

### 上传数量限制

通过`max-count`属性可以限制上传图片的数量。上传数量达到限制后，会自动隐藏上传区域

```html
<van-uploader
  preview
  multiple
  :max-count="2"
/>
```

### 自定义上传样式

通过插槽可以自定义上传区域的样式

```html
<van-uploader>
  <van-button icon="photo" type="primary">上传图片</van-button>
</van-uploader>
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| name | 标识符，可以在回调函数的第二项参数中获取 | `String` | - | 1.6.13 |
| accept | 接受的文件类型 | `String` | `image/*` | - |
| preview | 是否在上传完成后展示预览图 | `Boolean` | `false` | 2.0.0 |
| preview-size | 预览图和上传区域的尺寸，单位为`px` | `String | Number` | `80px` | 2.0.0 |
| multiple | 是否开启图片多选，部分安卓机型不支持 | `Boolean` | `false` | 2.0.0 |
| disabled | 是否禁用图片上传 | `Boolean` | `false` | - |
| capture | 图片选取模式，可选值为`camera`(直接调起摄像头) | `String` | - | 2.0.0 |
| before-read | 文件读取前的回调函数，返回`false`可终止文件读取 | `Function` | - | - |
| after-read | 文件读取完成后的回调函数 | `Function` | - | - |
| max-size | 文件大小限制，单位为`byte` | `Number` | - | - |
| max-count | 图片上传数量限制 | `Number` | - | 2.0.0 |
| result-type | 文件读取结果类型，可选值为`text` | `String` | `dataUrl` | - |
| upload-text | 上传区域文字提示 | `String` | - | 2.0.0 |

### Events

| 事件名 | 说明 | 回调参数 |
|------|------|------|
| oversize | 文件大小超过限制时触发 | 同`after-read` |

### Slots

| 名称 | 说明 |
|------|------|
| default | 自定义上传区域 |

### before-read、after-read 回调参数

| 参数名 | 说明 | 类型 |
|------|------|------|
| file | 文件解析后的 file 对象 | `Object` |
| detail | 额外信息，包含 name 字段 | `Object` |