微信小程序云开发---上传图片

直接上传到云存储上面，至于另外上传到自己的服务器上面的话，后面搞好再说吧

首先主要是用到这三个API：wx.chooseMedia、wx.cloud.uploadFile、wx.cloud.init

wx.chooseMedia：用于选择文件（包括视频图片），它的success会返回一个临时文件路径链，

官方文档：wx.chooseMedia(Object object) | 微信开放文档 (qq.com)

wx.cloud.uploadFile：上传文件到云存储上面，区别于原生态的wx.uploadFlie。wx.cloud.uploadFile只有两个必填项就是cloudpath和fliename，cloudpath是指存在的路径，filename是指你选择的文件名。就是比如选择图片你们应该使用到choosemedia的success的tempflies.tempfliepath内容，

官方文档：wx.cloud.uploadFile | 微信开放文档 (qq.com)

wx.cloud.init：这个是为了给你那个项目初始化云开发的需要在app.js上加。

官方文档：初始化 | 微信开放文档 (qq.com)

首先需要搞一下云开发，左上角那个云开发，你要开通一下获得那个环境ID不然你用不了。

开通之后要初始化一下

先打开app.js在里面加入：直接加到onLaunch()里面如图：

if (!wx.cloud) {console.error('请使用 2.2.3 或以上的基础库以使用云能力')} else {wx.cloud.init({env: 'env-5g7l0be850063009',traceUser: true,})

然后到project.config.json加一句："couldfunctionRoot": "cloud/",//could是名称，自己命名。

到这来既可以用了，但是要用云函数还是不行的，要使用云函数的话

上点代码：

wxml部分，就是设个按钮，做一下点击事件，

  <button class="ToTheyuan" bindtap="totheyuan">上传图片</button>

js部分：注意那个data哪里

就是这里cloudPath: "myImageTotheYUAN/" + "myimage" + that.data.j + ".png",

这个是为了放到myImageTotheYUAN/文件夹里面，然后文件名不重复（重复会覆盖）。wx.chooseMedia、wx.cloud.uploadFile两个API的参数，建议去官方文档看看。上面有简单实例（读官方文档是必要的）


totheyuan: function () {var flienamevar that = thiswx.chooseMedia({count: 9,mediaType: ['image', 'video'],sourceType: ['album', 'camera'],maxDuration: 30,camera: 'back',success(res) {/*  console.log(res)console.log(res.tempFiles) */for (var i = 0; i < res.tempFiles.length; i++) {console.log(res.tempFiles[i].tempFilePath);wx.cloud.uploadFile({cloudPath: "myImageTotheYUAN/" + "myimage" + that.data.j + ".png",//cloudPath:"myImageTotheYUAN/"+res.tempFiles[i].tempFilePath,filePath: res.tempFiles[i].tempFilePath,success: res => {console.log("上传成功")wx.showToast({title: "上传成功！",// duration: 2000}),wx.hideLoading()},fail: err => {console.log(errCode)console.log(errMsg)wx.showToast({title: "上传失败，请检查网络！"+errCode,// icon: "none",//duration: 2000})wx.hideLoading()}})that.data.j = that.data.j+1}},fail() {console.log('调用失败')}})},

上面那个信息提示框可能会有点问题，可以看情况调一下，或者直接不要

至于wx.uploadFlie的话是原生态的上传方式，可以接自己的服务器

微信小程序云开发---上传图片相关推荐

微信小程序云开发上传图片和删除图片
将图片上传到云开发中的云存储上传图片 wxml文件 <van-button type="primary" bindtap="afterRead"> ...
微信小程序云开发上传图片无法预览显示
这是图片无法预览显示的情况,而且文件格式显示也不显示为图片格式不要忘记要在起完名字后加上你希望的图片格式后缀名加完之后就可以正常显示了
基于微信小程序云开发（校园许愿墙app）2.0稳定版，以发布上线
大家好~我是c站的一个小博主,我会定期更新博文,本篇是围绕微信小程序基于腾讯云开发展开的一个项目,如果看着还不错,或者对您有帮助的话,可以进我的专栏看看我的小程序的其他作品https://blog.c ...
微信小程序云开发 · 从0搭建商业级校园跑腿平台（已开源）
微信小程序云开发 · 从零搭建商业级校园跑腿平台小秃僧新生代农民工,一枚准毕业的大四学生,热爱前端开发,做个有态度.有思想.有价值的公众号. 好久不更新了,再更新已是打工人! 我将分享用云开发 ...
微信小程序云开发初步上手
微信小程序云开发初步上手 1.概述 2019年11月6-7日,我报名参加了腾讯开发者大会举办的"2019年小程序.云开发极限编程"活动,英文名为"CloudBase Ha ...
微信小程序--云开发学习
这两周因为没有布置任务,主要进行微信小程序云开发的学习 ················· 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的原生 ...
微信小程序云开发学习
1.参考视频教程:微信小程序云开发基础到实战云数据库云函数云存储云调用[新视觉]_哔哩哔哩_bilibili 2.参考笔记: 本来想自己做一份笔记的,后来发现已经有人做了份非常不错的笔记了,再 ...
垃圾分类微信小程序——云开发+CMS+微应用+百度智能云图片识别
功能列表 1.0.0版本: 三个版本,一个APPID,登录页选择版本登录,openid判断社区居民用户注册,一房一主工作/清洁人员账号绑定,一人一号,一号一人用户首页,直接展示搜索功能,包括图 ...
微信小程序云开发初学者入门教程一
微信小程序云开发初学者入门教程一(云开发环境搭建) 本教程适合刚刚入门的小白,云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现 ...

微信小程序云开发---上传图片

微信小程序云开发---上传图片相关推荐

最新文章

热门文章