# Uploader 上传

[toc]

用于相机拍照或上传文件选择操作，但不包括上传的功能。

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-uploader": "../dist/uploader/index"
  }
}

```

## 用法

### 基础用法

`files` 属性为当前图片文件列表，此属性为 `必选属性`。

```html
<tea-uploader 
  files="{{ fileList }}" 
  bind:success="handleSuccess"
>
</tea-uploader>
```

```javascript
Page({
  data: {
    fileList: []
  },

  handleSuccess(e) {
    const { order } = e.currentTarget.dataset
    
    this.setData({
      [`fileList${order}`]: e.detail
    })
  }
})
```

### 设置上传按钮提示文案

通过 `uploadText` 属性来设置上传按钮提示文案。

```html
 <tea-uploader 
  files="{{ fileList }}" 
  uploadText="选择图片" 
  bind:success="handleSuccess"
>
</tea-uploader>
```

### 开启全屏图片预览

通过 `previewFullImage` 属性来开启点击缩图进行全屏图片预览。

```html
 <tea-uploader 
  files="{{ fileList }}" 
  previewFullImage="{{ true }}" 
  bind:success="handleSuccess"
>
</tea-uploader>
```

### 自定义每行数量

默认一行展示四个图片文件，可以通过 `columnNum` 自定义每列图片文件数量。

```html
 <tea-uploader 
  files="{{ fileList }}" 
  columnNum="3" 
  bind:success="handleSuccess"
>
</tea-uploader>
```

### 限制相册单次选择的图片张数

通过 `count` 属性来指定单次从相册最多可以选择的图片张数，默认为 `9` 张（最大值）。

```html
 <tea-uploader 
  files="{{ fileList }}" 
  count="6" 
  bind:success="handleSuccess"
>
</tea-uploader>
```

### 禁止上传

通过 `disabled` 属性来展示禁用状态，此时上传按钮不可点击。

```html
 <tea-uploader 
  files="{{ fileList }}" 
  disabled="{{ true }}"
>
</tea-uploader>
```

## Props

| 参数               | 描述                                  | 类型        | 默认值                          | 可选值                          |
| ---------------- | ----------------------------------- | --------- | ---------------------------- | ---------------------------- |
| gutter           | 元素之间的间距                             | `Number`  | `10`                         | -                            |
| columnNum        | 每一列有多少个                             | `Number`  | `4`                          | -                            |
| files            | 当前图片文件列表，包含属性url（必选）                | `Array`   | `[]`                         | -                            |
| sizeType         | 所选的图片的尺寸                            | `Array`   | `["original", "compressed"]` | `["original", "compressed"]` |
| sourceType       | 选择图片的来源                             | `Array`   | `["album", "camera"]`        | `["album", "camera"]`        |
| count            | 从相册选择时，单次最多可以选择的图片张数。最大上限为9张。       | `Number`  | `9`                          | -                            |
| uploadText       | 上传区域文字提示                            | `String`  | -                            | -                            |
| disabled         | 是否禁用文件上传                            | `Boolean` | `false`                      | -                            |
| deletable        | 是否展示删除按钮                            | `Boolean` | `true`                       | -                            |
| imageMode        | 预览图裁剪、缩放模式，可选值请参考小程序image组件的mode属性值 | `String`  | `aspectFill`                 | -                            |
| previewFullImage | 是否在点击预览图后進行全屏图片预览                   | `Boolean` | `false`                      | -                            |
| useSlot          | 是否自定义上传区域                           | `Boolean` | `false`                      | -                            |

## 事件

| 事件名                | 描述        | 回调参数                                           |
| ------------------ | --------- | ---------------------------------------------- |
| bind:success       | 上传文件成功时触发 | e.detail: 当前已读取的图片<br>(url：文件路径；size：文件大小、单位B) |
| bind:click-preview | 点击预览图片时触发 | -                                              |
| bind:delete        | 点击删除图标时触发 | e.detail.index: 删除图片的序号值                       |

## Slots

| 名称  | 描述      |
| --- | ------- |
| -   | 自定义上传区域 |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名                                     | 默认值                    | 描述  |
| --------------------------------------- | ---------------------- | --- |
| uploader-upload-text-color              | @text-light-color      | -   |
| uploader-upload-text-size               | @font-size-xs          | -   |
| uploader-upload-background-color        | @background-base-color | -   |
| uploader-upload-border-color            | @border-color          | -   |
| uploader-upload-disabled-opacity        | @opacity-disabled      | -   |
| uploader-delete-button-background-color | rgba(0, 0, 0, .5)      | -   |