小程序云开发上传图片到云存储

在学习了小程序云开发后，遇到了开发中常见的图片上传，今天简单的记录总结下在云开发中如何实现图片上传到云存储中。

在这里简单的分了两种情况，一种是选择图片后直接上传到云存储中，像替换头像之类的就是符合这种情况。第二种是选择图片后，点击提交按钮再上传到云存储中，就像朋友圈发布或表单中添加图片的一样点击发布按钮才可以上传。

接下来我们先看第一种情况，选择图片直接上传到云存储中：

效果如下：

代码：

<view><image src="{{images}}"></image></view>
<view bindtap="upload">上传</view>

upload(){let that=this;wx.chooseImage({//异步方法count: 9,//最多选择图片数量sizeType:['original', 'compressed'],//选择的图片尺寸 原图，压缩图sourceType:['album','camera'],//相册选图，相机拍照success(res){//tempFilePaths可以作为图片标签src属性const tempFilePaths = res.tempFilePathsconsole.log("选择成功",res)for(let i=0; i < tempFilePaths.length; i++){//多个图片的循环上传wx.cloud.uploadFile({//上传至微信云存储cloudPath:'myImage/' + new Date().getTime() + "_" +  Math.floor(Math.random()*1000) + ".jpg",//使用时间戳加随机数作为上传至云端的图片名称filePath:tempFilePaths[i],// 本地文件路径success: res => {// 返回文件 IDconsole.log("上传成功",res.fileID)that.setData({images:res.fileID//获取上传云端的图片在页面上显示})wx.showToast({title: '上传成功',})}})}}})},

上传后，点击云存储面板刷新就能看到新上传的图片

接下来我们看下第二种情况，当选择图片后，点击提交按钮再上传到云存储中。

效果图如下：

代码如下：

<form action="" bindsubmit="addBtn">
<view><view class="imgFlex"><block wx:for="{{images}}" wx:key="*this" ><view data-index="{{index}}" class="item_img"><image src="{{item}}"></image></view></block></view><view bindtap="upload">上传</view>
</view><button type="primary" form-type="submit">提交</button><button type="primary" form-type="reset">重置</button>
</form>

//index.js
//import WxValidate from '../../utils/WxValidate';
const app = getApp()
const db = wx.cloud.database()//调用默认云环境的数据库引用
Page({data: {images:[],//选择图片images_success: [],//上传云存储后的云存储地址数组images_success_size:0,//图片上传成功的数量},onLoad(){},upload(){let that=this;wx.chooseImage({//异步方法count: 9,//最多选择图片数量sizeType:['original', 'compressed'],//选择的图片尺寸 原图，压缩图sourceType:['album','camera'],//相册选图，相机拍照success(res){//const tempFilePaths = res.tempFilePathsthat.setData({images: res.tempFilePaths});console.log("选择成功",res)}})},uploadImage(index){let that=thiswx.cloud.uploadFile({//上传至微信云存储cloudPath:'myImage/' + new Date().getTime() + "_" +  Math.floor(Math.random()*1000) + ".jpg",//使用时间戳加随机数给图片命名filePath:that.data.images[index],// 本地文件路径success: res => {// 返回文件 IDconsole.log("上传成功",res.fileID)that.data.images_success[index] = res.fileID;that.data.images_success_size = that.data.images_success_size+1;if(that.data.images_success_size == that.data.images.length){console.log("上传成功：", that.data.images_success)} else {that.uploadImage(index+1)}},fail: err =>{that.setData({images_success:[],images_success_size:0})wx.showToast({icon:'none',title: '上传失败，请重新上传',})}})},//提交表单添加到数据库addBtn: function(e){let that=this;if(that.data.images.length > 0){//1、判断是否有图片that.setData({//3、给上传图片初始化一个长度，上传成功的数组和已有的数组一致images_success:that.data.images})that.uploadImage(0)//2、有图片时先上传第一张}},})

以上就是关于小程序图片上传到云存储中的代码，代码中都有写注释，这里就不多做解释了，实践第一。第一次尝试写的，欢迎同学们点评

小程序云开发上传图片到云存储相关推荐

微信小程序——传统开发模式与云开发模式对比
目录 1.传统开发模式与云开发模式的对比图 2.云开发技术能力说明 3.云开发技术特点 1.传统开发模式与云开发模式的对比图通过传统开发模式与云开发模式的对比图可以看出传统开发模式需要开发者关注 ...
五十二、微信小程序云开发中的云存储
@Author:Runsen 暑假很长,明年就是找工作的时候了.这个时候必须比之前还要拼命. 百翻无下,努力就是我的代言词.今天,正式进入云存储的学习.云存储这个概念在之前学习的时候没有注意到. 下面 ...
微信小程序云开发上传图片和删除图片
将图片上传到云开发中的云存储上传图片 wxml文件 <van-button type="primary" bindtap="afterRead"> ...
五十一、微信小程序云开发中的云函数
@Author:Runsen 暑假很长,明年就是找工作的时候了.这个时候必须比之前还要拼命. 百无聊赖,看过文档才发现,微信小程序已将云函数,对象存储和云数据库这些都搬了进来,由于前几天刚刚看过这些方 ...
小程序 | 认识CMS、创建云开发环境、创建并进入CMS内容管理系统
之前使用云开发在使用上受到了很大的限制,一和别人交流说自己做了一个小程序是用"云开发"完成的,仿佛很NB的样子,但只有自己知道心里是虚的.没有底儿的.一开始使用云开发的功能,先是& ...
【微信小程序云开发】使用云函数（node.js）实现多张图片转成pdf的功能，且pdf带水印
最近在做项目的时候,碰到一个功能需要多张图片转成pdf的功能,首先,在网上找了很多资料,都没有一个合适的. 后来,就自己动手使用云函数写了一个处理图片转成pdf的云函数,而且需带水印. 直奔主题,使用 ...
【微信小程序-原生开发】实用教程08 - 开通微信云开发，操作云数据库新增数据（含修改数据权限），初始化云服务（含获取微信云环境 id），获取云数据，滚动公告栏
开始前,请先完成圆梦宝典中宫格导航的开发,详见 [微信小程序-原生开发]实用教程 07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字) https://blog.csdn.net ...
视频教程-AI拍照识花小程序云开发，无需调用后台接口，上线你的识花小程序-微信开发
AI拍照识花小程序云开发,无需调用后台接口,上线你的识花小程序五年互联网实战开发经验,全栈工程师,熟悉主流前端开发技术,js,vue等,后端技术方向在python,node,曾先后就职于阿里云,阿里 ...
五十、微信小程序云开发中的云数据库
@Author:Runsen 今天是2020年7月24日.不学习,不复习,那根一条咸鱼差不多. 今天继续学习复习微信小程序中的云开发. 文章目录云开发云数据库云开发开发者可以使用云开发开发微信 ...
【小程序源码】uni-app云开发的网盘助手抓取网盘资源
这是一款uni-app开发的一款网盘小助手小程序源码安装教程: 我们首先使用HBuilderx导入您的源码,然后点击manifest.json基础配置然后重新获取一下uni-app应用标识然后我们 ...

小程序云开发上传图片到云存储

接下来我们先看第一种情况，选择图片直接上传到云存储中：

接下来我们看下第二种情况，当选择图片后，点击提交按钮再上传到云存储中。

小程序云开发上传图片到云存储相关推荐

最新文章

热门文章

小程序云开发 上传图片到云存储

接下来我们先看第一种情况，选择图片直接上传到云存储中：

接下来我们看下第二种情况，当选择图片后，点击提交按钮再上传到云存储中。

小程序云开发 上传图片到云存储相关推荐

最新文章

热门文章

小程序云开发上传图片到云存储

小程序云开发上传图片到云存储相关推荐