bui.upload Class
单文件上传,支持webapp跟安卓,ios,依赖于fileselect控件, 1.5.1开始,默认使用web上传,切换原生,需要更改needNative参数 注意: BUI 1.7开始将废弃掉该原生接口, 请使用对应的原生平台抛出的方法使用
预览地址: demo
选择,上传图片,只支持单个文件上传
add: 添加文件remove: 移除添加的文件
clear: 清除所有添加的文件
data: 获取添加的数据
start: 上传文件
stop: 停止上传
toBase64: 把路径转换成base64位图片地址
widget: 获取依赖的控件
Constructor
bui.upload
-
[option]
Parameters:
-
[option]Object optional-
[url]String optional上传的地址
-
[headers]Object optional头部参数, 原生不支持
-
[method]Object optional默认: "POST",
-
[data]Object optional要上传的对象, data初始化的时候有值会直接上传, 使用 h5 的formdata 上传
-
[fileKey]String optional默认: file , 后端需要接收这个字段进行保存
-
[timeout]Number optional触发timeout的时间默认60000
-
[mediaType]String optional1.4.7新增, 文件的类型, 原生只支持图片上传,webapp部分机型不支持 默认: picture | allmedia | video | audio ｜ application/zip
-
[from]String optional1.4.7新增, 默认 "" 从相册选 | "camera" 相机拍照 | "camcorder" 录像, 需要配合 mediaType 参数
-
[showProgress]Boolean optional是否显示进度条 默认true
-
[native]Boolean optional1.5.1废弃,由needNative决定
默认true 由bui.isWebapp状态决定 false则强制采用web方式 -
[needNative]Boolean optional1.5.1新增, 是否使用原生上传, 不受bui.isWebapp状态决定 默认 false|true 通过这个切换对应的效果,可以通过全局配置 bui.config.upload = {needNative:true}
-
[onProgress]Function optional自定义进度条回调,接收百分比值
-
[onSuccess]Function optional成功的回调
-
[autoClose]Boolean optional1.5新增, 是否允许关闭进度条
-
[onMask]Function optional1.5新增, 点击默认进度条的回调,默认停止上传并关闭显示
-
[onFail]Function optional失败的回调
-
[currentName]Function optional1.5.2新增,获取当前选择的文件名称,常用于配合删除
-
[currentIndex]Function optional1.5.2新增,获取当前选择的文件索引,常用于配合删除
-
Example:
html:
<div id="buiPhoto" class="bui-upload bui-fluid-space-4">
<div class="span1">
<div id="btnUpload" class="bui-btn">
<i class="icon-plus large"></i>
</div>
</div>
</div>
js:
// 1. 初始化 这里如果传url初始化,则url作为公共上传地址,start不再需要传url
var uiUpload = bui.upload({
url: "http://"
});
// 2. 选择文件
$("#btnUpload").click(function(){
uiUpload.add({
onSuccess: function(file){
// 3. 上传文件 选择以后直接上传到服务器
uiUpload.start({
data: {
file: file
},
onSuccess:function(res){
// 展示返回的图片
$("#buiPhoto").append(<div class="span1"><img src="${res.url}" /></div>)
},
onFail: function(res,status){
// 失败 status = "timeout" || "error" || "abort", "parsererror"
}
});
}
})
})
// 1.8.6 新增批量选择上传
$("#btnUpload").click(function(){
uiUpload.addMore({
onSuccess: function(file){
// 3. 上传文件 选择以后直接上传到服务器
uiUpload.start({
data: {
file: uiUpload.data()
},
onSuccess:function(res){
// 展示返回的图片
$("#buiPhoto").append(<div class="span1"><img src="${res.url}" /></div>)
},
onFail: function(res,status){
// 失败 status = "timeout" || "error" || "abort", "parsererror"
}
});
}
})
})
Item Index
Methods
add
-
[option]
添加文件
Parameters:
-
[option]Object optional图片质量,默认0.8
-
[needCompress]Boolean optional1.5.3新增 是否需要压缩, 默认 false | true , true 以下的质量及宽度高度参数才会有效.
-
[quality]Number optional图片质量,默认0.8
-
[width]Number optional图片宽度,默认800, targetWidth和targetHeight设置为undefined 则添加原图
-
[height]Number optional图片高度,默认800, targetWidth和targetHeight设置为undefined 则添加原图
-
[mediaType]String optional文件的类型, picture | video | allmedia 原生只支持图片上传
-
[from]String optional1.4.7新增, 默认 "" 从相册选 | "camera" 相机拍照 | "camcorder" 录像, 需要配合 mediaType 参数 原生: 默认来自 photo(相册) | camera(相机) | savephoto(来自保存的相册)
-
[destinationType]String optionalfile (返回路径值) | data (返回base64位值)
-
[onChange]Function optional改变时触发
-
[onSuccess]Function optional成功的回调
-
[onFail]Function optional失败的回调
-
Example:
uiUpload.add({
onChange: function(e){
if( e.target.files.length > 1){
bui.hint("一次只能选择一张图片")
// 不执行onSuccess
return false;
}
},
onSuccess: function(file){
// console.log(this)
}
})
addMore
-
[option]
添加多个图片
Parameters:
-
[option]Object optional图片质量,默认0.8
-
[needCompress]Boolean optional1.5.3新增 是否需要压缩, 默认 false | true , true 以下的质量及宽度高度参数才会有效.
-
[quality]Number optional图片质量,默认0.8
-
[width]Number optional图片宽度,默认800, targetWidth和targetHeight设置为undefined 则添加原图
-
[height]Number optional图片高度,默认800, targetWidth和targetHeight设置为undefined 则添加原图
-
[mediaType]String optional文件的类型, picture | video | allmedia 原生只支持图片上传
-
[from]String optional1.4.7新增, 默认 "" 从相册选 | "camera" 相机拍照 | "camcorder" 录像, 需要配合 mediaType 参数 原生: 默认来自 photo(相册) | camera(相机) | savephoto(来自保存的相册)
-
[destinationType]String optionalfile (返回路径值) | data (返回base64位值)
-
[onChange]Function optional改变时触发
-
[onSuccess]Function optional成功的回调
-
[onFail]Function optional失败的回调
-
Example:
uiUpload.addMore({
onChange: function(e){
if( e.target.files.length > 1){
bui.hint("一次只能选择一张图片")
// 不执行onSuccess
return false;
}
},
onSuccess: function(file){
// console.log(this)
}
})
clear
()
chainable
清空所有选择的文件
Example:
uiUpload.clear();
currentIndex
()
获取最后选择的文件名,删除的时候
Example:
var currentIndex = uiUpload.currentIndex();
currentName
()
获取最后选择的文件名,删除的时候
Example:
var currentName = uiUpload.currentName();
data
()
获取所有选择的文件, 原生默认只返回最后一个选择的文件
Example:
var data = uiUpload.data();
// 返回 [{ name: "base64.jpg", data: null, type: "jpg" }]
// 其中 data为要上传的文件值
hideLoading
()
chainable
隐藏上传条
Example:
uiUpload.hideLoading()
remove
-
[name]
删除某个文件,支持索引,图片名称,需要先把 currentIndex,currentName 之类的存在选择后的图片上,供删除调用, 建议拿索引去比对, 因为原生选择的图片默认都命名为 resize.jpg 所以不方便通过名称删除.
Parameters:
-
[name]String optional图片索引|图片名称
Example:
uiUpload.remove();
resize
-
[option]
修改图片大小
Parameters:
-
[option]Object optional对象
-
[data]Object optional图片的值, 不传则拿最后选择的文件
-
[quality]Number optional图片质量,默认0.8
-
[width]Number optional图片宽度,默认800, targetWidth和targetHeight设置为undefined 则添加原图
-
[height]Number optional图片高度,默认800, targetWidth和targetHeight设置为undefined 则添加原图
-
[needCompress]Boolean optional是否需要压缩, 默认: false | true
-
[destinationType]String optionalfile (返回路径值) | data (返回base64位值) | blob(返回文件流)
-
[onSuccess]Function optional成功的回调
-
[onFail]Function optional失败的回调
-
Example:
uiFileSelect.resize({
data: uiFileSelect.data(),
width:100,
needCompress:true,
onSuccess: function(file){
// this 指向uiFileSelect
// console.log(this)
}
})
showLoading
()
chainable
显示上传条
Example:
uiUpload.showLoading()
start
-
[option]
开始上传，如果是多选的图片，接口要支持多文件上传，uiUpload.data() 包含文件和文件信息，可能还需要二次处理，不支持多文件上传可以调用 startAll 会把选择的图片多次上传。
Parameters:
-
[option]Object optional参数同初始化一样,在初始化时配置,则是公共的, data不传则获取最后一次选择
-
[url]String optional上传的地址, 默认可以在bui.upload 初始化的时候配置就不用再传
-
[headers]String optional附加在headers的参数
-
[fileKey]String optional默认: file, 上传的图片后端要接收哪个字段
-
[data]Object optional默认不传,会上传最后一张选择的图片, 还可以添加上传的附加参数,如果需要自己指定某一张图片,可以使用 {file: null}, file为默认的图片字段,需要和fileKey保持一致.
-
[onSuccess]Function optional上传成功的回调
-
[onFail]Function optional上传失败的回调
-
Example:
1. 单文件上传示例：
uiUpload.start({
url: "https://",
data: null,
onSuccess: function (res) {
// 成功
},
onFail: function (res,status) {
// 失败 status = "timeout" || "error" || "abort", "parsererror"
}
})
2. 接口支持多文件上传示例：1.8.4新增
let files = [];
let data = uiUpload.data();
data.forEach((item,index)=>{
// file文件字段
files.push(item.data)
})
uiUpload.start({
url: "https://",
data: {
file: files
},
onSuccess: function (res) {
// 成功
},
onFail: function (res,status) {
// 失败 status = "timeout" || "error" || "abort", "parsererror"
}
})
3. 接口不支持多文件上传，可以使用 startAll 多次上传接口
startAll
-
[option]
分批上传, 一次传一个文件的方式，会有多个请求
Parameters:
-
[option]Object optional参数同初始化一样,在初始化时配置,则是公共的
-
[url]String optional上传的地址, 默认可以在bui.upload 初始化的时候配置就不用再传
-
[headers]String optional附加在headers的参数
-
[fileKey]String optional默认: file, 上传的图片后端要接收哪个字段
-
[data]Object optional默认不传,会上传所有图片, 还可以添加上传的附加参数,如果需要自己指定图片,可以使用 {file: uiUpload.data()}, file为默认的图片字段,值是数组,需要和fileKey保持一致.
-
[needFileinfo]Boolean optional1.5.3新增 默认:false | true . 把选择的图片的相关信息一起传给接口, name,size,type
-
[onSuccess]Function optional上传成功的回调
-
[onFail]Function optional上传失败的回调
-
[onEnd]Function optional1.6.2 全部上传成功或失败都会触发
-
Example:
uiUpload.startAll({
url: "http://",
onSuccess: function (res) {
// 成功
},
onFail: function (res,status) {
// 失败 status = "timeout" || "error" || "abort", "parsererror"
}
})
stop
()
chainable
停止上传
Example:
uiUpload.stop()
toBase64
-
[option]
把选择的图片文件转换成base64地址,可以直接展示在页面上
Parameters:
-
[option]Object optional-
[data]String optional通过文件选择的返回值,如果不传data,值来自于通过add添加的最后一个文件
-
[needCompress]Boolean optional1.5.1新增,转换成base64以后需要压缩吗 默认 false | true , 为true, mimeType 类型才有效
-
[mimeType]String optional1.5.1新增,转换的图片类型 默认为原图片类型 "image/jpeg" | "image/png"
-
[onSuccess]Function optional成功的回调
-
[onFail]Function optional失败的回调
-
Example:
uiUpload.toBase64({
onSuccess: function (imgurl) {
$("#id").append('<img src="'+imgurl+'" />')
}
});
widget
-
[name]
获取依赖的控件
Parameters:
-
[name]String optional依赖控件名 loading
Example:
//获取依赖控件
var uiLoading = uiUpload.widget("loading");
//使用uiLoading的方法
uiLoading.start();