<a name="uploader"></a>
## uploader(selector, options)
uploader 上傳組件
**Kind**: global function
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| selector | <code>string</code> | | 上傳組件的selector |
| options | <code>object</code> | | 配置項 |
| [options.url] | <code>string</code> | | 上傳的url,返回值需要使用json格式 |
| [options.auto] | <code>boolean</code> | <code>true</code> | 設置為`true`后,不需要手動調用上傳,有文件選擇即開始上傳。用this.upload()來上傳,詳情請看example |
| [options.type] | <code>string</code> | <code>"file"</code> | 上傳類型, `file`為文件上傳; `base64`為以base64上傳 |
| [options.fileVal] | <code>string</code> | <code>"file"</code> | 文件上傳域的name |
| [options.compress] | <code>object</code> | | 壓縮配置, `false`則不壓縮 |
| [options.compress.width] | <code>number</code> | <code>1600</code> | 圖片的最大寬度 |
| [options.compress.height] | <code>number</code> | <code>1600</code> | 圖片的最大高度 |
| [options.compress.quality] | <code>number</code> | <code>.8</code> | 壓縮質量, 取值范圍 0 ~ 1 |
| [options.onBeforeQueued] | <code>function</code> | | 文件添加前的回調,return false則不添加 |
| [options.onQueued] | <code>function</code> | | 文件添加成功的回調 |
| [options.onBeforeSend] | <code>function</code> | | 文件上傳前調用,具體參數看example |
| [options.onSuccess] | <code>function</code> | | 上傳成功的回調 |
| [options.onProgress] | <code>function</code> | | 上傳進度的回調 |
| [options.onError] | <code>function</code> | | 上傳失敗的回調 |
**Example**
#### html
```html
<div class="weui-cells weui-cells_form" id="uploader">
<div class="weui-cell">
<div class="weui-cell__bd">
<div class="weui-uploader">
<div class="weui-uploader__hd">
<p class="weui-uploader__title">圖片上傳</p>
<div class="weui-uploader__info"><span id="uploadCount">0</span>/5</div>
</div>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles"></ul>
<div class="weui-uploader__input-box">
<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" capture="camera" multiple="" />
</div>
</div>
</div>
</div>
</div>
</div>
```
#### js
```javascript
var uploadCount = 0;
weui.uploader('#uploader', {
url: 'http://localhost:8081',
auto: true,
type: 'file',
fileVal: 'fileVal',
compress: {
width: 1600,
height: 1600,
quality: .8
},
onBeforeQueued: function(files) {
// `this` 是輪詢到的文件, `files` 是所有文件
if(["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0){
weui.alert('請上傳圖片');
return false; // 阻止文件添加
}
if(this.size > 10 * 1024 * 1024){
weui.alert('請上傳不超過10M的圖片');
return false;
}
if (files.length > 5) { // 防止一下子選擇過多文件
weui.alert('最多只能上傳5張圖片,請重新選擇');
return false;
}
if (uploadCount + 1 > 5) {
weui.alert('最多只能上傳5張圖片');
return false;
}
++uploadCount;
// return true; // 阻止默認行為,不插入預覽圖的框架
},
onQueued: function(){
console.log(this);
// console.log(this.status); // 文件的狀態:'ready', 'progress', 'success', 'fail'
// console.log(this.base64); // 如果是base64上傳,file.base64可以獲得文件的base64
// this.upload(); // 如果是手動上傳,這里可以通過調用upload來實現;也可以用它來實現重傳。
// this.stop(); // 中斷上傳
// return true; // 阻止默認行為,不顯示預覽圖的圖像
},
onBeforeSend: function(data, headers){
console.log(this, data, headers);
// $.extend(data, { test: 1 }); // 可以擴展此對象來控制上傳參數
// $.extend(headers, { Origin: 'http://127.0.0.1' }); // 可以擴展此對象來控制上傳頭部
// return false; // 阻止文件上傳
},
onProgress: function(procent){
console.log(this, procent);
// return true; // 阻止默認行為,不使用默認的進度顯示
},
onSuccess: function (ret) {
console.log(this, ret);
// return true; // 阻止默認行為,不使用默認的成功態
},
onError: function(err){
console.log(this, err);
// return true; // 阻止默認行為,不使用默認的失敗態
}
});
```