新增组件库jboot-component，使用步骤如下：
```
yarn add jboot-component
```
在src/configure/index.js中，引入该组件库。
```
import JBootComponent from 'jboot-component';
export default function (context){
......其他代码......
//使用此方式时，如需图片预览，则直接调用this.$previewImage即可，参数同下面的ImagePreview.previewImage参数。
context.install(JBootComponent, {
log: false, //是否打印组件库中的log, 默认不打印
upload: { //此种写法文件上传跟图片上传都会生效，如果只针对文件上传,请将upload属性更改为uploadFile，如果是图片上传，则更改为uploadImage，同时存在时，upload优先级最低。
//此处可以写上传相关全局统一的属性，例如：
url: 'http://xxx.com/upload', //所有上传都请求这个路径
multiple: true //全部多选
... //其他参数，具体见【图片上传组件】下方的参数表
}
});
......其他代码......
}
```
该组件库目前内置功能如下：
1.移动拖拽指令 drag。
```
import Vue from 'vue';
import {directives} from 'jboot-component';
Vue.directive('drag', directives.drag);
<div v-drag/>
```
2.图片预览功能。
```
//如果只需要预览功能时，可使用此方式。
import {ImagePreview} from 'jboot-component';
ImagePreview.previewImage({images: '图片url集合，必填',index: '当前查看的在图片集合中的下标，可定位到当前图片，不填默认为0'})
```
3.图片上传组件。
```
<upload-image url="http://xxxxxxx" multiple v-model="formData.attachments" :max="3">
<span slot="tip">每张图片最大2M，最多允许上传3张图片</span>
</upload-image>
```
| 参数名 | 类型 | 是否必填 | 描述 |
| --- | --- | --- | --- |
| accept | String | 否 | 可上传的文件类型，默认全部上传，可自定义上传类型，例如：.png,.jpg,.mp4 英文逗号分割 |
| url | String | 必填 | 上传地址 |
| multiple | Boolean | 否 | 是否允许多选，默认false |
| base64| Boolean | 否 | **1.2.87起新增！！仅支持upload-image！！！** 是否采用base64形式，该值为true时，本地将图片转换为base64字符串。默认false |
| quality| Number，0-1之间的数字| 否 | **1.2.88起新增！！仅支持upload-image！！！** 采用base64形式时，该值代表图片质量，值越低，质量越低，图片体积也随之变小。默认0.8。|
| params| Object | 否 | 上传时需要携带的其他参数。 |
| max | Boolean | 否 | 最多允许选择的图片数量，不填则不限制 |
| name | String | 否 | 上传名称，默认file |
| autoUpload | Boolean | 否 | 是否选择完立即上传，默认是 |
| remove | Boolean | 否 | 是否展示删除按钮，默认展示 |
| sendCookie | Boolean | 否 | 是否发送cookie，默认不发送 |
| disabled | Boolean | 否 | 是否禁用，默认不禁用 |
| urlField | String | 否 | 附件链接地址所在的字段，默认是url |
| nameField | string| 否 | 附件名称所在的字段，默认是name |
| maxSize | Number | 否 | 允许上传的单文件最大size，单位是MB ，不写不限制|
| headers | Function | 否 | 键值对，用作上传请求头|
| beforeUpload | Function | 否 | 1.2.2起新增！上传之前的回调，入参为{file, fileList}|
| uploadSuccess | Function | 否 | 1.1.9起新增！上传成功时触发的事件， response为上传返回值，fileId为组件内的文件id标识|
| uploadError | Function | 否 | 1.1.9起新增！上传异常时触发的事件，response为后台返回值，fileId为组件内的文件id标识|
| uploadCancel | Function | 否 | 1.1.9起新增！取消上传时触发的事件，event为事件对象，fileId为组件内的文件id标识|
| uploadSizeError | Function | 否 | 1.1.9起新增！选择的文件超过大小限制时，触发此事件。errorFiles为超过大小的文件列表，maxSize为限制的文件大小|
|titleClick|Function|否|1.2.81起新增！仅针对文件上传组件。点击文件名时触发的回调函数，参数为当前附件。|
| emptyText | String | 否 | 1.2.1起新增！只读状态下，未上传附件时的提示语，默认“暂未上传附件”|
| filterField | String | 否 | 1.2.3起新增！过滤器的字段名，默认为type，需配合filterValue属性使用，可达到过滤展示某个条件的数据|
| filterValue | String | 否 | 1.2.3起新增！过滤器的字段值，需配合filterField属性使用，可达到过滤展示某个条件的数据|
|timeout|Number|否|1.2.65起新增！用于配置上传请求超时时间，默认5s|
|uploadProgress|Function|否|1.2.67起新增，返回上传进度的百分比。|
| 事件名 | 参数 | 描述 |
| --- | --- | --- |
| upload-size-error | 无 | 注意：1.1.9起废弃此事件！选择的文件超过大小限制时，触发此事件 |
| on-success | {response, fileId} | 注意：1.1.9起废弃此事件！上传成功时触发的事件， response为上传返回值，fileId为组件内的文件id标识 |
| on-cancel | {event, fileId} | 注意：1.1.9起废弃此事件！取消上传时触发的事件，event为事件对象，fileId为组件内的文件id标识 |
| on-error | {response, fileId} | 注意：1.1.9起废弃此事件！上传异常时触发的事件，response为后台返回值，fileId为组件内的文件id标识 |
| 插槽名 | 描述 |
| --- | --- |
| tip | 展示在下方的内容 |
4.文件上传组件。
```
<upload-file url="http://xxxxxxx" multiple v-model="formData.attachments">
<span slot="tip">每个附件最大5M</span>
</upload-file>
```
支持参数同上方的图片上传。
5.调用方法进行文件上传
可在vue实例中直接调用方法，进行文件上传。
~~~
//arg可以为空，为空则采用全局配置的参数
//如果arg是一个字符串参数，则会被认为是一个上传地址，组件将使用该地址进行上传操作
//如果arg是一个对象，则可以传入文档中的参数来控制组件
this.$upload(arg).then(response => {
//上传成功的返回值
}, error => {
//上传异常的返回值
});
~~~
