2022微信小程序开发中怎样实现图片上传

 所属分类:php教程

 浏览:172次-  评论: 0次-  更新时间:2022-10-08
描述:更多教程资料进入php教程获得。 老规矩,直接上代码了。handleCancelPic() { let id = this.data.dbId; ...
更多教程资料进入php教程获得。

老规矩,直接上代码了。

handleCancelPic() {        let id = this.data.dbId;
wx.chooseImage({
count: 3, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: res => {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;

this.setData({
src: tempFilePaths
})
upload(this,tempFilePaths,'','');
}
})
}
然后一个封装好的方法function upload(page, path,way,id) {
console.log(path)
wx.showToast({
icon: "loading",
title: "正在上传"
});
var test = [],
that = this; for (var i = 0; i wx.uploadFile({
url: api.CancelImg,
filePath: path[i],
name: 'file',
header: { "Content-Type": "multipart/form-data" },
success: res => {
test.push(res);
wx.setStorageSync('cancelImg',test)
console.log(test) if (res.statusCode != 200) {
wx.showModal({
title: '提示',
content: '上传失败',
showCancel: false
}) return;
}else {
wx.showModal({
title: '提示',
content: '上传成功',
showCancel: false
})
}
},
fail: function (e) {
console.log(e);
wx.showModal({
title: '提示',
content: '上传失败',
showCancel: false
})
},
complete: function () {
wx.hideToast(); //隐藏Toast
}
})
}
登录后复制

这个是多个图片上传的方法,单个图片上传的话,把循环去掉就好。主要是因为微信官方默认的就是一次上传一张图片这个很蛋疼。只能这么搞了。。。

相信看了本文案例你已经掌握了方法,更多精彩请关注zzsucai.com其它相关文章!

推荐阅读:

微信小程序开发容器视图的使用

微信小程序开发中Android请求失败如何处理

以上就是微信小程序开发中怎样实现图片上传的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: 微信小程序,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!