多图上传在小程序里面需要借助wx的api功能 wx.chooseImage来实现:此API的功能具备从相机或者拍照获取图片,它的主要参数这样设置:
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths }})
count参数指定一次最多可以选择几张图片,count最多9张。
sizeType参数:指定上传原图或者 压缩图片上传,在小程序内通常采用compresed 压缩方式,因为可以减少用户流量,一般相机保存的图片都有4-6M大小,采用压缩图片上传可以提高速度,也能让用户更放心的使用你的小程序;
success成功选择图片返回后回调函数:这里写把图片上传到你的后台服务器接口上;
下面来看看具体的应用场景代码:
把传一张图片到后台接口的的代码实现:
//多张图片上传
uploadimg: function (data) {
var self = this,
i = data.i ? data.i : 0,//当前上传的哪张图片
success = data.success ? data.success : 0,//上传成功的个数
fail = data.fail ? data.fail : 0;//上传失败的个数
/**显示进度条 */
self.setData({ show_progress: 1, progress_per: 0 });
/**调用接口上传 */
let uploadUrl = app.util.url('entry/wxapp/transfile', { m: 'kbwdl_piaopiaozu' });
const uploadTask = wx.uploadFile({
url: uploadUrl,
filePath: data.path[i],
name: 'upfile',
formData: {},
success: function (resp) {
//resp 的data 从您的上传api返回 数据:图片相对路径#图片绝对路径 的格式。
success++;
let url = resp.data;
let path = url.split('#');
let form_image_paths = self.data.form_image_paths;
self.setData({
form_image_paths: form_image_paths.concat(path[0])
});
//这里可能有BUG,失败也会执行这里,所以这里应该是后台返回过来的状态码为成功时,这里的success才+1
},
fail: function (res) {
fail++;//图片上传失败,图片上传失败的变量+1
console.log('fail:' + i + "fail:" + fail);
},
complete: function () {
i++;//这个图片执行完上传后,开始上传下一张
if (i == data.path.length) { //当图片传完时,停止调用
console.log('执行完毕');
self.setData({ isupend: true });//全部上传完可以删除已经上传的
console.log('成功:' + success + " 失败:" + fail);
} else {//若图片还没有传完,则继续调用函数
data.i = i;
data.success = success;
data.fail = fail;
self.uploadimg(data);
}
}
});
/** */
uploadTask.onProgressUpdate((res) => {
if (res.progress < 100) {
self.setData({ show_progress: 1, progress_per: res.progress })
} else {
self.setData({ show_progress: 0 })
}
})
},
app.util.url('entry/wxapp/TransVideo', { m: 'kbwdl_piaopiaozu' });
是一个封装好的 ,生成后台api地址的函数而已。您可以按自己的api 代替这个。
下面是 选择相机或者拍照后返回success 调用 上面的 uploadimg 函数:
/**多图片一次多张上传 */
uploadImages: function () {
const self = this;
let selected = self.data.tempFilePaths;
wx.chooseImage({
count: 9,
success: function (res) {
var imgsrc = res.tempFilePaths;
selected = selected.concat(imgsrc)
self.setData({
tempFilePaths: selected,
isupend: false,
});
var transfile = {};
transfile.path = imgsrc;
self.uploadimg(transfile);
},
});
/** */
},
wx.uploadFile 是微信小程序是API ,实现了上传功能,它返回一个 uploadTask对象,表示一个上传进度
,用它来显示图片的上传进度。wx.choseImage 会执行count次 success 回调函数,即选择了几张图片就有几个成功回调。所以它执行了count次 uploadimg。(count的次数 按每次选择上传的图片具体数量定,参数设置的count是最大一次上传数。)
本文内容全部结束,感谢您的阅读,希望能对你有所帮助!