## Upload 上傳
### 該文檔不再維護,新版文檔地址: [form-create 文檔](http://fc.gd8.top)
> accept 文件類型
>
> [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\#attr-accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)
#### [在線預覽](https://jsrun.net/dehKp/edit)
#### 舉例:
```js
{
type: "upload",
field: "pic",
title: "輪播圖",
value: [
'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg',
'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'
],
props: {
"type":"select",
"uploadType":"image",
"action": "/upload.php",
"name":"pic",
"multiple": true,
"accept":"image\/*",
"format":["jpg","jpeg","png","gif"],
"maxSize":2048,
"maxLength":5,
"onSuccess":function (res) {
return res.data.filePath;
},
handleIcon:'ionic',
onHandle:(src)=>{alert(src);},
},
}
```
#### maker快速生成:
```js
$formCreate.maker.upload('輪播圖','pic',['http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'])
.props({
"action": "",
"maxLength": 4,
"multiple": true,
"type": "select",
"uploadType": "image",
"name": "file",
"onSuccess": function () {
return 'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg';
},
})
.validate([{required:true, type: 'array', min: 3, message: '請上傳3張圖片', trigger: 'change'}])
```
#### json 生成規則
```json
{
type: "Upload",//必填!
field: "pic",//必填!
title: "輪播圖",//必填!
//input值,當maxLength等與1時值為字符串,大于1時值為數組
value: ['http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'], //input值
props: {
//上傳控件的類型，可選值為 select（點擊選擇），drag（支持拖拽）
"type":"select", //必填!
//上傳文件類型，可選值為 image（圖片上傳），file（文件上傳）
"uploadType":"image", //必填!
//上傳的地址
"action": "", //必填!
//上傳的文件字段名
"name":"",
//上傳時附帶的額外參數
"data":{},
//設置上傳的請求頭部
"headers": {},
//是否支持多選文件
"multiple": true,
//支持發送 cookie 憑證信息
"withCredentials":false,
//不支持
// "showUploadList":false, //是否顯示已上傳文件列表
// "defaultFileList":[], // 默認已上傳的文件列表
//接受上傳的文件類型
"accept":"",
//支持的文件類型，與 accept 不同的是，format 是識別文件的后綴名，accept 為 input 標簽原生的 accept 屬性，會在選擇文件時過濾，可以兩者結合使用
"format":[],
//文件大小限制，單位 kb
"maxSize":undefined,
//可上傳文件數量
"maxLength":1,
//輔助操作按鈕的圖標 ,設置為false將不顯示
"handleIcon":'ionic',
//是否可刪除,設置為false是不顯示刪除按鈕
"allowRemove":true,
},
}
```
#### 全局配置
> 可全局配置上傳組件的處理方法
```json
option:{
upload:{
//上傳文件之前的鉤子，參數為上傳的文件，若返回 false 或者 Promise 則停止上傳
beforeUpload:()=>{},
//文件上傳時的鉤子，返回字段為 event, file, fileList
onProgress:(event, file, fileList)=>{},
//文件上傳成功時的鉤子，返回字段為 response, file, fileList,若需有把文件添加到文件列表中,在函數值返回即可
onSuccess:(response, file, fileList)=>{
// return 'filePath';
},
//文件上傳失敗時的鉤子，返回字段為 error, file, fileList
onError:(error, file, fileList)=>{},
//點擊已上傳的文件鏈接時的鉤子，返回字段為 file， 可以通過 file.response 拿到服務端返回數據
onPreview:(file)=>{},
//文件列表移除文件時的鉤子，返回字段為 file, fileList
onRemove:(file, fileList)=>{},
//文件格式驗證失敗時的鉤子，返回字段為 file, fileList
onFormatError:(file, fileList)=>{},
//文件超出指定大小限制時的鉤子，返回字段為 file, fileList
onExceededSize:(file, fileList)=>{},
//輔助操作按鈕的圖標 ,設置為false將不顯示
handleIcon:'ios-eye-outline',
//點擊輔助操作按鈕事件
onHandle:(src)=>{},
//是否可刪除,設置為false是不顯示刪除按鈕
allowRemove:true,
}
}
```
#### 參數說明
##### 基本規則 rule:
| 字段名 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| type | 元素類型 | String | true | - |
| field | 字段名稱 | String | true | - |
| title | 字段別名 | String | true | - |
| value | 字段值,當props.maxLength等與1時值為字符串,大于1時值為數組 | String,Array | false | - |
| props | 元素配置 | Object | true | - |
| validate | 驗證規則 | Array | false | - |
##### 元素配置 props:
| 字段名 | 說明 | 字段類型 | 是否必填 | 默認值 |
| :--- | :--- | :--- | :--- | :--- |
| type | 上傳控件的類型，可選值為 select（點擊選擇），drag（支持拖拽） | String | true | - |
| uploadType | 上傳文件類型，可選值為 image（圖片上傳），file（文件上傳） | String | true | - |
| action | 上傳的地址 | String | true | - |
| name | 上傳的文件字段名 | String | false | - |
| data | 上傳時附帶的額外參數 | Object | false | - |
| headers | 設置上傳的請求頭部 | Object | false | - |
| multiple | 是否支持多選文件 | Boolean | false | false |
| withCredentials | 支持發送 cookie 憑證信息 | Boolean | false | false |
| accept | 接受上傳的文件類型 | String | false | - |
| format | 支持的文件類型，與 accept 不同的是，format 是識別文件的后綴名，accept 為 input 標簽原生的 accept 屬性，會在選擇文件時過濾，可以兩者結合使用 | String | false | - |
| maxSize | 文件大小限制，單位 kb | Number | false | - |
| maxLength | 可上傳文件數量 | Number | false | - |
| beforeUpload | 上傳文件之前的鉤子，參數為上傳的文件，若返回 false 或者 Promise 則停止上傳 | Function | false | - |
| onProgress | 文件上傳時的鉤子，返回字段為 event, file, fileList | Function | false | - |
| onSuccess | 文件上傳成功時的鉤子，返回字段為 response, file, fileList,若需有把文件添加到文件列表中,在函數返回值即可 | Function | true | - |
| onError | 文件上傳失敗時的鉤子，返回字段為 error, file, fileList | Function | false | - |
| onPreview | 點擊已上傳的文件鏈接時的鉤子，返回字段為 file， 可以通過 file.response 拿到服務端返回數據 | Function | false | - |
| onRemove | 文件列表移除文件時的鉤子，返回字段為 file, fileList | Function | false | - |
| onFormatError | 文件格式驗證失敗時的鉤子，返回字段為 file, fileList | Function | false | - |
| onExceededSize | 文件超出指定大小限制時的鉤子，返回字段為 file, fileList | Function | false | - |
| handleIcon | 輔助操作按鈕的圖標 ,設置為false將不顯示 | String | false | - |
| onHandle | 點擊輔助操作按鈕事件,返回src | Function | false | - |
| allowRemove | 是否可刪除,設置為false是不顯示刪除按鈕 | Boolean | false | true |
---
