# 文件上传

## 导入使用
```code[javascript]
import SuUpload from "ss-universal-client-web/comp/form/su-upload";
```
## 单个图片上传-SingleImage
### 示例
:::demo
```html
<template>
    <div>{{ value }}
        <su-upload v-model="value" type="SingleImage" @change="change" @done="done"></su-upload>
        <su-upload v-model="value1" :sideLength="140" type="SingleImage"></su-upload>
        <su-upload v-model="value2" :side-width="150" :side-height="250"
                   type="SingleImage">
              <div slot="tip" class="el-upload__tip">只能上传xxx文件，且不超过xxxx</div>     
        </su-upload>
    </div>
</template>

<script>
export default {
    components: {
        SuUpload
    },
    data() {
        return {
            value: {name: 'food.jpg', serverUrl: 'https://www.baidu.com/img/flexible/logo/pc/result.png'},
            value1: null,
            value2: null,
        }
    },
    methods: {
        change(data){
            console.log("上传数据变化：",data);
        },
        done(data){
            console.log("done：",data);
        }
    }
}
</script>
```
:::
### Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| sideLength     |  边长           | string | — | 120 |
| sideWidth     |  宽           | string | — | — |
| sideHeight     |  高           | string | — | — |
| backgroundColor     |  设置图片的背景色           | string | — | — |


## 多个图片上传-MultipleImage
### 示例
:::demo
```html
<template>
    <div>
        <p>value:{{value}}</p>
        <p>value1:{{value1}}</p>
        <p>value2:{{value2}}</p>

        <su-upload v-model="value" type="MultipleImage" :options="{limit:2}"></su-upload>
        <su-upload v-model="value1" type="MultipleImage" @change="change" @done="done"
            ></su-upload>
        <su-upload v-model="value2" :sideLength="150" type="MultipleImage"></su-upload>
    </div>
</template>

<script>
export default {
    components:{
        SuUpload
    },
    data () {
        return {
            value:[{serverUrl: 'https://www.baidu.com/img/flexible/logo/pc/result.png'}],
            value1:['https://www.baidu.com/img/flexible/logo/pc/result.png'],
            value2:[]
        }
    },
    methods:{
        change(data){
            console.log("上传数据变化：",data);
        },
        done(data){
            console.log("done：",data);
        }
    }
}
</script>
```
:::
### Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| sideLength     |  边长           | string | — | 120 |
| sideWidth     |  宽           | string | — | — |
| sideHeight     |  高           | string | — | — |
| backgroundColor     |  设置图片的背景色           | string | — | — |


## 单个按钮上传-SingleButton
### 示例
:::demo
```html
<template>
    <div>{{ value }}
        <su-upload v-model="value" type="SingleButton" @change="change" @done="done"></su-upload>
        <su-upload v-model="value2" type="SingleButton" :options="{accept:['.jpg']}">
              <div slot="tip" class="el-upload__tip">只能上传xxx文件，且不超过xxxx</div>     
        </su-upload>
    </div>
</template>

<script>
export default {
    components: {
        SuUpload
    },
    data() {
        return {
            value: {name: 'food.jpg', serverUrl: 'https://www.baidu.com/img/flexible/logo/pc/result.png'},
            value1: null,
            value2: null,
        }
    },
    methods: {
        change(data){
            console.log("上传数据变化：",data);
        },
        done(data){
            console.log("done：",data);
        }
    }
}
</script>
```
:::
## 通用配置及能力
### Attributes
| 参数      | 说明          | 类型     | 说明 | 默认值  |
|---------- |-------------- |---------- |-------- |-------- |
| v-model     |  绑定数据   | Object/Array | 单文件模式为FileInfo， 多文件模式为FileInfos | - |
| type     |  上传类型      | string | SingleImage/xxx | SingleImage |
| options     |  配置信息      | Object | -- | -- |

### options
| 参数      | 说明          | 类型     | 说明 | 默认值  |
|---------- |-------------- |---------- |-------- |-------- |
| limit     |  限制文件数量   | Number | -- | 999 |
| accept     |  上传类型      | Array | 接受上传的文件类型[".jpg"] | [] |
| maxSize     |  文件最大大小  | Number | 0代表无限制;1Mb = 1x1024x1024 | 0 |

### Events
| 参数      | 说明          | 回调参数  |
|---------- |-------------- |---------- |
| change     |  上传文件数量变化事件   | 与v-model类型一样|
| done     |  所有文件状态完成事件(例：批量上传会执行一次，change多次)      | 与v-model类型一样 |

### FileInfo

| 参数      | 说明          | 类型     | 可选值 | 默认值  |
|---------- |-------------- |---------- |-------- |-------- |
| uid     |  唯一id   | number | - | - |
| size     |  文件大小      | number | -- | -- |
| name     |  文件名称      | string | -- | -- |
| raw     |  File对象      | File | - | - |
| serverUrl     |  服务器地址 接口使用地址      | string | - | - |
| url     |  图片地址 前端使用地址      | string | - | - |

### FileInfo初始化简易模式1

| 参数      | 说明          | 类型     | 可选值 | 默认值  |
|---------- |-------------- |---------- |-------- |-------- |
| name     |  文件名称      | string | -- | -- |
| serverUrl|  服务器地址 接口使用地址      | string | - | - |

### FileInfo初始化简易模式2

| 参数      | 说明          | 类型     | 可选值 | 默认值  |
|---------- |-------------- |---------- |-------- |-------- |
| serverUrl|  服务器地址 接口使用地址      | string | - | - |

### 通用多文件属性 FileInfos
> Array[FileInfo]