|
作者：加菲猫，来自原文地址
开发中总会需要文件上传的功能（比如图片上传），微信提供了wx.uploadFile(OBJECT)方法，用来将文件上传至服务器。
上传图片之前自然需要选择图片，小程序API -- wx.chooseImage(OBJECT)。就是从本地相册选择图片或者使用相机拍照。
OBJECT参数说明如下：
-
wx.chooseImage({
-
-
count: 9, //最多可以选择的图片数，默认为9
-
-
sizeType: ['orignal','compressed'], //original 原图，compressed 压缩图，默认二者都有
-
-
sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有
-
-
success: function(){}, //成功则返回图片的本地文件路径列表 tempFilePaths
-
-
fail: function(){}, //接口调用失败的回调函数
-
-
complete: function(){} //接口调用结束的回调函数（调用成功、失败都会执行）
-
})
success返回参数： tempFilePaths: 图片的本地文件路径列表
wx.uploadFile(OBJECT)
-
wx.uploadFile({
-
url: 'http://example.weixin.qq.com/upload', //开发者服务器 url
-
filePath: tempFilePaths[0],//要上传文件资源的路径
-
name: 'file', //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
-
formData:{ //HTTP 请求中其他额外的 form data
-
'user': 'test'
-
},
-
success: function(res){
-
var data = res.data
-
//do something
-
}
-
})
在chooseImage回调函数里调用上传方法！
前久，做了一个如上图的图片上传功能！直接上代码吧：
-
/* 函数描述：作为上传文件时递归上传的函数体体；
-
* 参数描述：
-
* filePaths是文件路径数组
-
* successUp是成功上传的个数
-
* failUp是上传失败的个数
-
* i是文件路径数组的指标
-
* length是文件路径数组的长度
-
*/
-
uploadDIY(filePaths,successUp,failUp,i,length){
-
var that = this;
-
app.toastShow(0,"图片上传中...",20000000,1);
-
wx.uploadFile({
-
url: '/uploadurl/',
-
filePath: filePaths[i],
-
name: 'file',
-
formData:{
-
'user': 'test'
-
},
-
success: (res) => {
-
successUp++;
-
var srcArr = that.data.src;
-
srcArr.push(filePaths[i]),
-
that.setData({
-
src : srcArr
-
});
-
-
var data = JSON.parse(res.data);
-
var newpicKeys = that.data.picKeys;
-
newpicKeys.push(data.data['pic_key']);
-
that.setData({
-
picKeys: newpicKeys
-
});
-
},
-
fail: (res) => {
-
that.setData({
-
isuploaderror: 1
-
});
-
failUp ++;
-
},
-
complete: () => {
-
i ++;
-
if(i == length){
-
wx.hideToast();
-
var txt = '总共'+successUp+'张上传成功,'+failUp+'张上传失败！';
-
app.toastShow(0,txt,2000,1);
-
}else{ //递归调用uploadDIY函数
-
if(that.data.isuploaderror){
-
app.toastShow(0,'图片上传失败，请重新选择上传',2000,1);
-
}else{
-
this.uploadDIY(filePaths,successUp,failUp,i,length);
-
}
-
}
-
}
-
});
-
},
-
uploadImage:function(e){
-
var that = this;
-
that.setData({
-
isuploaderror: 0
-
});
-
var nowLen = that.data.src.length;
-
var remain = 9 - nowLen;
-
wx.chooseImage({
-
count: remain,
-
sizeType: ['original', 'compressed'],
-
sourceType: ['album', 'camera'],
-
success: (res) => {
-
var successUp = 0; //成功个数
-
var failUp = 0; //失败个数
-
var length = res.tempFilePaths.length; //总共个数
-
var i = 0; //第几个
-
this.uploadDIY(res.tempFilePaths,successUp,failUp,i,length);
-
},
-
});
-
}
因为wx.uploadFile只能单个文件上传，所以需要变相的实现多文件上传，即，complete回调里调用uploadDIY调用函数本身~ 直到i==length!
|
