新增組件庫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 => {
//上傳異常的返回值
});
~~~
