热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

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

这次给大家带来微信小程序开发中怎样实现图片上传,微信小程序开发中实现图片上传的注意事项有哪些,下面就是实战案例,一起来看一下。

老规矩,直接上代码了。

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
}
})
}

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

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

推荐阅读:

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

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

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


推荐阅读
author-avatar
郑子宜4262
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有