微信小程序实现一张或多张图片上传（云开发)

一、简介：

这篇文章向大家展示的是把图片上传到云数据库中，这是我做商城项目时研究的。大家都知道，云开发是没有后端开发的，所有图片我们要放到云数据库中。

二、素材图：

：

三、效果图：

四、代码：

wxml:

！-迷你程序/页面/FB/FB。wxml-view class=' pages ' view class=' top ' text class=' top _ name '商品图片：/text/view！-图片-view class=' images _ box ' block wx : key=' imgbox ' wx : for=' { { imgbox } } ' view class=' img-box ' image class=' img ' src=' { { item } } '/image view class=' img-delect ' data-deindex=' { { index } } ' bind tap=' img delete 1 ' image class=' img ' src='././images/delete。png '/image/view/view/block view class=' img-box ' bind tap=' addpic 1 ' wx : if=' { { img box。长度9 } } ' image class=' img ' src='././images/add _ image。png '/图像/视图/视图按钮bindtap='fb '上传图片/button/view wxss 3360

/*迷你程序/页面/FB/FB。wxss */page {底色： rgba(200，198，201，0.527)；}.页面{宽度： 98%;margin:汽车飞越：隐藏；}.顶部{宽度： 100%;飞越：隐藏；margin : auto font-size : 50 rpx；背景-颜色：白色；边框-左侧： 8rpx纯色rgb(9，245，60)；边框-底部： 1rpx实心rgba(117，116，116，0.527)；}.top _ name {左边距： 20 rpx}/* 图片*/.images _ box {宽度： 100%；display : flex flex-方向：行；柔性包装：包装；正义-内容： flex-start；背景-颜色：白色；}.img-box { border : 5rpx；边框样式：实心；border-color: rgba(0，0，0，0.452)；宽度： 200 rpx高度： 200rpx左边距左： 35rpx保证金-top : 20 rpx；保证金-底部： 20 rpx相对位置：}/* 删除图片*/.img-delect { width :50 rpx；高度：50rpx边界半径：50%;位置：绝对；右：-20 rpx；top :-20 rpx；}.img { width : 100%；高度： 100%;}.嘉格{ height: 60rpx宽度： 90%;保证金-左侧： 5%;保证金-权利： 5%;背景-颜色：白色；display : flex justice-content : flex-start；}.人民币{ width : 280 rpxborder : 2rpx固态rgb(199，197，197)；} button { margin-top : 20 rpx；背景-颜色：绿色；}.无线电组{ display: flex}js:

//页数/FB/FB。jsconst app=GetApp()、const db=wx。云。database()；//初始化数据库页面({ /** *页面的初始数据*/data: { imgbox: []，//选择图片文件IDs: []，//上传云存储后的返回值}, //删除照片imgDelete1:函数(e) {让那个=这个；让索引=e . CurrentTarget。数据集。去索引；让imgbox=这个。数据。imgboximgbox.splice(index，1)。setdata({ imgbox : imgbox })；}, //选择图片addPic1:函数(e){ var imgbox=this。数据。imgbox控制台。log(imgbox)var=this；var n=5；if(5 imgbox。长度0){ n=5-imgbox。长度；} else if(imgbox。长度==5){ n=1；} wx.chooseImage({ count: n，//默认9,设置图片张数sizeType: ['原始','压缩'],//可以指定是原图还是压缩图，默认二者都有sourceType: ['相册','相机'],//可以指定来源是相册还是相机，默认二者都有成功：函数(RES){//控制台。日志(RES . tempfilepath)//返回选定照片的本地文件路径列表，tempFilePath可以作为图片标签的科学研究委员会属性显示图片var tempfile path=RES . tempfile path if(imgbox。length==0){ imgbox=tempfilepath } else if(5 imgbox。长度){ imgbox=imgbox。concat(tempfile path)；}那个。setdata({ imgbox : imgbox })；} }) }, //图片imgbox:函数{这个。setdata({ imgbox : e . detail。value })}，//发布按钮fb:函数(e) { if(！这个。数据。imgbox。长度){ wx。showtoast({ icon : ' none '，title: '图片类容为空' });} else { //上传图片到云存储wx.showLoading({ title: '上传中，})让promiseArr=[]；用于(设I=0；我喜欢这个。数据。imgbox。长度；我){ PromiseArr。push(new Promise)((reslove，reject)={ let item=this。数据。img框[I]；字母后缀=/\。\w $/.exec(项目)[0];//正则表达式返回文件的扩展名wx。云。上传文件({ cloudpath : new Date().getTime()后缀，//上传至云端的路径文件路径：项，//小程序临时文件路径成功： RES={ this。setdata({ file id 3360 this。数据。fileids。concat(RES . fileid)})；console.log(res.fileID)//输出上传后图片的返回地址reslove()；wx。hide loading()；wx.showToast({ title: '上传成功，}) }，fail : RES={ wx。hide loading()；wx.showToast({ title: '上传失败', }) } }) }));}承诺。全部(答应earr).然后(res={//等数组都做完后做然后方法console.log('图片上传完成后再执行)这个。setdata({ imgbox :[]})})} }，})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。