小程序云开发（二）上传图片到云服务器、上传图片并展示

1、页面内先写好上传按钮

<view style="width:80%;text-align:center;margin:0 auto;background:#ccc" class="upimgstyle" bindtap="uploadImgView">上传</view><!-- 下面这个是为了在页面展示图片 可以不加 -->
<view class="imgView"><view class="imgs" wx:if="{{imglist.length>0}}" wx:for="{{imglist}}" wx:key='index'><image style="width:500rpx;height:500rpx;" src="{{item}}"></image></view>
</view>

2、js 上传事件

  data: {imglist:[] // 页面图片展示的  可以不加},//上传图片按钮
uploadImgView:function(e){let _t=thiswx.chooseImage({count: 2, // 最多上传几个 默认9  sizeType: ['original','compressed'], // 原图/压缩图  sourceType: ['album', 'camera'], // 相册/相机success: (res) => {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片console.log('上传',res)// res.tempFilePaths[0]_t.setData({imglist:res.tempFilePaths})//页面展示用，可以不加for(let i=0; i<res.tempFilePaths.length; i++ ){//图片上传云服务wx.cloud.uploadFile({cloudPath:Date.parse(new Date())+i+'.png',//图片上传时名字会覆盖，所以这边用时间戳和索引值拼的//cloudPath:'uploadimage/'+Date.parse(new Date())+index+'.png',//前面加上 文件夹名字/test.png 图片就会上传到指定的文件夹下，否则按上面的会传到根目录下filePath:res.tempFilePaths[i], // 文件路径success: res => {console.log('上传云',res)console.log(res.fileID)},fail: err => {console.log('上传云err',err)// handle error}})//这个可以页面展示或者传给自己接口的后台如果要base64的话 转成base64 可以不加//_t.zhuanImage(res.tempFilePaths[i],i)}}});
},//将图片转成   base64 用于页面展示
zhuanImage:function(imgsrc,index){let _t=thislet list=_t.data.imglistwx.getFileSystemManager().readFile({filePath:imgsrc, //选择图片返回的相对路径encoding: 'base64', //编码格式success: res => { //成功的回调console.log('111',res)// console.log('res---',res)let img_flow = 'data:image/png;base64,' + res.data;// console.log('img_flow---',img_flow)list.push(img_flow)_t.setData({imglist:list})}});
},

运行效果

默认云控制台什么都没有

当点击上传按钮时

wx.chooseImage返回如下信息

上传云返回的结果

此时云端自动创建了文件夹（cloudPath:'uploadimage/'+自己起的图片名字+'.png',）

如果这个地方不写文件夹名字，图片就会存在根目录下 cloudPath:自己起的图片名字+'.png',

小程序云开发（二）上传图片到云服务器、上传图片并展示相关推荐

【微信小程序企业级开发教程】如何搭建服务器（tomcat）后台
文章目录 1 条件 2 步骤 2.1 获取AppID 2.2 服务器.域名(需备案).ssl证书(可免费申请) 2.3 域名备案 2.4 SSL证书(申请与安装配置) 3 微信公众平台中配置域名信息 ...
【小程序】开发需要注意的地方（三）
31.小程序与内嵌网页之间的跳转小程序跳转到内嵌H5页面,需要使用web-view组件,定义该组件的src属性即可. 内嵌H5页面跳转到小程序页面引入微信的jssdk文件,使用wx.miniProg ...
【图示】小程序云开发和不使用云开发的区别
一.小程序传统开发模式: 传统开发中, 开发者不仅需要关注前端的页面展示, 还需要搭建后端的数据库, 购买服务器和域名,如果是境内服务器, 还需要备案等等. 小程序上线后, 开发者需要定期进行数据库维 ...
【小程序云开发转uniCloud阿里云】
为啥要改呢?因为微信小程序的云开发要收费了,19.9每个月,所以改成用uniCloud的阿里云,免费! 大概思路:小程序转成uniapp,小程序云开发改用uniCloud,云存储也是用uniCloud ...
微信小程序云开发之数据分页云函数
微信小程序云开发之数据分页云函数 2018-10-06 20:23:28 微信小程序的云开发可以自己对数据库进行操作而不需要后台,那么很常见的一个功能就是我们在读取数据的时候需要分页来获取 ...
小程序源码：全新独家云开发微群人脉小程序源码下载社群空间站
今天给大家带来一款云开发版本的微群人脉小程序源码该版本属于采集版本(群二维码自动采集) 该版本属于云开发版本(免服务器和域名) 这是一款不怕封小程序版本 PS:支持用户自主发布那一款还是有点危险因为 ...
小程序源码：全新独家云开发微群人脉-多玩法安装简单
今天给大家带来一款云开发版本的微群人脉小程序源码该版本属于采集版本(群二维码自动采集) 该版本属于云开发版本(免服务器和域名) 这是一款不怕封小程序版本 PS:支持用户自主发布那一款还是有点危险因为 ...
视频教程-AI拍照识花小程序云开发，无需调用后台接口，上线你的识花小程序-微信开发
AI拍照识花小程序云开发,无需调用后台接口,上线你的识花小程序五年互联网实战开发经验,全栈工程师,熟悉主流前端开发技术,js,vue等,后端技术方向在python,node,曾先后就职于阿里云,阿里 ...
腾讯云+社区沙龙·小程序敏捷开发实战(北京)开启报名
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:由云加社区技术沙龙发表在云+社区 2018伊始,最火爆的不是春晚和红包,而是从天而降的"跳一跳".这款来自微信的轻 ...
python操作微信小程序云端数据库_微信小程序·云开发云数据库的基本使用-微信小程序云开发实例-腾讯云微信小程序...
微信小程序·云开发云数据库的基本使用-微信小程序云开发实例-腾讯云微信小程序浏览量:1120 时间:2020-04-06

小程序云开发（二）上传图片到云服务器、上传图片并展示

小程序云开发（二）上传图片到云服务器、上传图片并展示相关推荐

最新文章

热门文章

小程序云开发（二） 上传图片到云服务器、上传图片并展示

小程序云开发（二） 上传图片到云服务器、上传图片并展示相关推荐

最新文章

热门文章

小程序云开发（二）上传图片到云服务器、上传图片并展示

小程序云开发（二）上传图片到云服务器、上传图片并展示相关推荐