| Param | Type | Default | Description |
|---|
| selector | string | | 上传组件的selector |
| options | object | | 配置项 |
| [options.url] | string | | 上传的url，返回值需要使用json格式 |
| [options.auto] | boolean | true | 设置为true后，不需要手动调用上传，有文件选择即开始上传。用this.upload()来上传，详情请看example |
| [options.type] | string | "file" | 上传类型, file为文件上传; base64为以base64上传 |
| [options.fileVal] | string | "file" | 文件上传域的name |
| [options.compress] | object | | 压缩配置, false则不压缩 |
| [options.compress.width] | number | 1600 | 图片的最大宽度 |
| [options.compress.height] | number | 1600 | 图片的最大高度 |
| [options.compress.quality] | number | .8 | 压缩质量, 取值范围 0 ~ 1 |
| [options.onBeforeQueued] | function | | 文件添加前的回调，return false则不添加 |
| [options.onQueued] | function | | 文件添加成功的回调 |
| [options.onBeforeSend] | function | | 文件上传前调用，具体参数看example |
| [options.onSuccess] | function | | 上传成功的回调 |
| [options.onProgress] | function | | 上传进度的回调 |
| [options.onError] | function | | 上传失败的回调 |
<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>
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; // 阻止默认行为，不使用默认的失败态
}
});
