### uploader

### Attention
- ios8及以下、安卓4.4（不包括4.4）以下存在canvas图片旋转不兼容兼容或性能太差的问题，所以在该情况下取消了图片的旋转，有可能会出现图片旋转角度不对的情况；
- 组件会修改传入的images，有时候会给images中的元素加一些属性，例如`status`；

在本地开发环境中，如果把图片直接上传到OSS，会存在跨域问题而导致上传失败；因此，组件内部对本地开发环境OSS上传设置了代理服务；
- 组件会根据`window.location.port`的值来判断当前环境是否为开发环境，从而决定是否使用代理（具体判定情况请看下方表格中 `isDev` 属性的说明）；
- 如果在实际的使用过程中，遇到组件对本地开发环境的判定不符合要求，大家可以先手动设置组件的属性`isDev`来覆盖默认的判定，并在 git 仓库中提交 issue；
- 本地开发环境的代理服务是部署在公司内网中的，因此本地开发环境需要连公司内网才能正常使用；

### Import
```js
import { Uploader } from 'bxs-ui-vue';
```

### Example
普通用法
```html
<bxs-uploader
  :oss-type="1"
  list-style="single"
  v-model="images"
  file-dir="project-name"
  >
</bxs-uploader>
```
```js
export default {
  components: {
    [Uploader.name]: Uploader
  },
  data() {
    return {
      images: [
        {
          title: '身份证人脸面'
          bgImg: 'id_face',
        },
        {
          title: '驾驶证',
          bgImg: 'https://media.winbaoxian.com/autoUpload/common/ID_font2x_51a64f467a9867a.png'
        }
      ]
    }
  }
}
```

自定义上传方法 customUpload
```html
<bxs-uploader
  ...
  :custom-upload="customUpload"
  ...
  >
</bxs-uploader>
```
```js
export default {
  ...
  methods: {
    customUpload() {
      return 'https://media.winbaoxian.com/000.png'

      // 支持返回多个url
      return [
         'https://media.winbaoxian.com/000.png',
         'https://media.winbaoxian.com/111.png'
         ]

      // 支持返回Promise
      return new Promise(resolve => {
        // 自定义上传图片的相关操作，例如使用appBridge上传，
        ...
        resolve('https://media.winbaoxian.com/000.png')

        resolve([
          'https://media.winbaoxian.com/000.png',
          'https://media.winbaoxian.com/111.png'
          ])
      })

      // 结合appBridge 使用
      return new Promise((resolve, reject) => {
        if (window.appBridge && appBridge.checkAppFeature('PHOTO')) {
          appBridge.getPhoto({
            ossType: 1,
            size: {
              width: 300,
              height: 400,
            },
            type: 3,
            isSecret: false,
            folderName: 'a-test',
            maxKB: 100,
          })
          // 注册回调
          appBridge.onPhotoDone(photoInfo => {
            if (photoInfo && photoInfo.photoUrl) {
              resolve(photoInfo.photoUrl)
            } else {
              Toast('appBridge上传失败')
              reject()
            }
          })
        } else {
          Toast('该版本不支持')
          reject()
        }
      })
    }
  }
}
```

自定义图片处理 handleFile
```html
<bxs-uploader
  ...
  :handle-file="handleFile"
  ...
  >
</bxs-uploader>
```
```js
export default {
  ...
  methods: {
    handleFile(file) {
      // handleFile 必须返回一个 Promise
      return new Promise(resolve => {
        // 可以对file进行自定义处理，并返回一个新的newFile；组件会使用newFile进行上传
        const newFile = getNewFile(file)
        resolve(newFile)
      })
    }
  }
}
```

### Attribute
| 参数| 说明 | 类型 | 默认值 |
| --- | --- | --- |  --- |
| ossType | 可选，上传到哪个oss实体；微易科技：`1`；微易经纪：`2`  | Number | 1 |
| images | 可选，图片列表，数组的元素必须为 Object，可使用v-model绑定 | Array | [ ] |
| listStyle | 可选，图片排列样式：`single`、`double`、`lattice`、`rows`、`row` | String | null |
| customUpload | 可选，自定义上传方法;如果使用customUpload来进行自定义上传，那么使用者需要自己去获取图片并上传，把得到的图片url返回给组件（例如使用appBridge上传图片）； customUpload 的返回值可以是 `String | Array<String>`，还可以返回一个 Promise，具体使用举例可以在上面找到;customUpload 过程中发生的错误，组件内部都不处理，需要使用者自己去处理 | Function | undefined |
| fileDir | 可选，上传oss后的文件存储路径 | String | bxs_ui_uploader |
| isDev | 可选，是否是本地开发环境；组件默认根据`window.location.port`来判断是否是开发环境；若`port`的值存在，则判定为开发环境；若`port`的值为空，则判定为 非开发环境；当传入的`isDev`的值不为空时，则会覆盖组件默认判定的值； | Boolean | null |
| disabled | 可选，是否禁用(上传、删除功能) | Boolean | false |
| beforeRead | 可选，读取文件之前；若该方法返回true，则继续进行；否则，终止上传；接收的参数是一个文件数组 | Function | undefined |
| oversize | 可选，图片体积超过限制时调用，终止上传；接收两个参数： files, maxSize；上传组件默认会弹一个toast提示"图片不得大于****"，如果传了该属性，则覆盖默认的行为，不会弹出默认toast提示； | Function | undefined |
| overAmount | 可选，图片张数超过限制时调用，终止上传；接收两个参数： maxAmount, files.length；上传组件默认会弹一个toast提示"最多可传*张"，如果传了该属性，则覆盖默认的行为，不会弹出默认toast提示； | Function | undefined |
| handleFile | 可选，处理图片；如果组件默认的处理图片方式不符合要求，可以使用自定义处理，handleFile 接收一个 File 类型的参数，返回一个 Promise，Promise 的返回值必须为 File 类型； | Function | undefined |
| beforeUpload | 可选，上传之前；若该方法返回true，则继续进行；否则，终止上传；接收的参数是一个对象数组 | Function | undefined |
| accept | 可选，input的accept属性 | String | image/* |
| capture | 可选，input的capture属性； 当设置为 `camera` 时，会直接调起摄像头拍照，而禁用掉相册（在某些第三方浏览器中有可能会存在兼容性问题导致该属性不生效） | String | null |
| maxSize | 可选，图片最大尺寸(单位：b) | Number | Number.MAX_VALUE |
| maxAmount | 可选，图片可上传的最大张数；当listStyle属性的值为`single` 或 `double` 时，图片只能单选，所以该属性无效 | Number | 9 |
| errorMessage | 可选，图片的错误信息(当listStyle属性的值为`lattice` 时，该属性无效) ; 当图片上传失败时，组件会显示默认的错误提示信息，传入的`errorMessage` 会覆盖默认的提示信息| String | null |
| timeout | 可选，请求超时时间；默认为 0，即不设置超时时间；| Number | 0 |

## 数组 images 中的元素（Object 对象）属性详解
| 属性| 类型 | 说明 |
| --- | --- | --- |
| title | string | 图片的名称，例如：身份证正面（只有当listStyle为`single`或`double`时有效） |
| url | string | 图片的链接url |
| bgImg | string | 图片的背景图链接，可以是常用枚举id，也可以是具体的url链接（只有当listStyle为`single`或`double`时有效），常用枚举id请看本页的末尾 |

### Slot
| 名称 | 说明 |
| --- | --- |
| button | 触发图片选择事件的按钮 （只有当组件的`listStyle`属性为空时才需要传）|

### Event
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| preview | 可选，点击图片触发 | { url: '...', index: 0, images: [{ url：... }...] } |
| delete | 可选，删除图片触发 | { image: { url:.... }, images: [{ url：... }...] } |
| upload-success | 可选，图片上传成功触发 | { image: { url:.... }, images: [{ url：... }...] } |
| upload-failed | 可选，图片上传失败触发 | { image: { url:.... }, images: [{ url：... }...] } |

### bgImg常用的枚举id
| 名称| id | 预览 |
| --- | --- | --- |
| 文件 | file | <img src="https://media.winbaoxian.com/autoUpload/common/uploader-singel-default-bg_50cf43edbe0abde.png" width="300" > |
| 身份证国徽面 | id_emb | <img src="https://media.winbaoxian.com/autoUpload/common/ID_font2x_51a64f467a9867a.png" width="300" > |
| 身份证人像面 | id_face | <img src="https://media.winbaoxian.com/autoUpload/common/ID_back2x_c6d5c06307df180.png" width="300" > |
| 存折信息面 | deposit_book | <img src="https://media.winbaoxian.com/autoUpload/common/deposit_book2x_1d1d8b33735a6ab.png" width="300" > |
| 银行卡正面 | bank_card_front | <img src="https://media.winbaoxian.com/autoUpload/common/bankcard_front2x_7e9530f90c8818d.png" width="300" > |
| 银行卡反面 | bank_card_back | <img src="https://media.winbaoxian.com/autoUpload/common/bankcard_back2x_4554d73a0f5d328.png" width="300" > |
| 手持文件(兜底方案) | hand_file | <img src="https://media.winbaoxian.com/autoUpload/common/hand-held_file2x_423f58337781646.png" width="300" > |
| 手持身份证国徽面 | hand_id_emb | <img src="https://media.winbaoxian.com/autoUpload/common/hand-held_ID_font2x_d93b14c97b4dbce.png" width="300" > |
| 手持身份证人像面 | hand_id_face | <img src="https://media.winbaoxian.com/autoUpload/common/hand-held_ID_back2x_ce50244bd7573c4.png" width="300" > |
