微信小程序实现一张或多张图片上传(云开发)微信小程序实现一张或多张图片上传(云开发)
主要介绍了微信小程序实现一张或多张图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
一、简介:一、简介:
这篇文章向大家展示的是把图片上传到云数据库中,这是我做商城项目时研究的。大家都知道,云开发是没有后端开发的,所
有图片我们要放到云数据库中。
二、素材图:二、素材图:
:
三、效果图:三、效果图:
四、代码:四、代码:
wxml:
<!--miniprogram/pages/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}}' bindtap='imgDelete1'>
<image class='img' src='../../images/delect.png'></image>
</view>
</view>
</block>
<view class='img-box' bindtap='addPic1' wx:if="{{imgbox.length<9}}">
<image class='img' src='../../images/add_image.png'></image>
</view>
</view>
<button bindtap='fb'>上传图片</button>
</view>
wxss:
/* miniprogram/pages/fb/fb.wxss */
page{
background-color: rgba(200, 198, 201, 0.527);
}
.pages{
width: 98%;
margin: auto;
overflow: hidden;
}
.top{
width: 100%;
overflow: hidden;
margin: auto;
font-size: 50rpx;
background-color: white;
border-left: 8rpx solid rgb(9, 245, 60);
border-bottom: 1rpx solid rgba(117, 116, 116, 0.527);
}
.top_name{
margin-left: 20rpx;
}
/* 图片 */
.images_box{
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
background-color: white;
}
.img-box{
border: 5rpx;
border-style: solid;
border-color: rgba(0, 0, 0, 0.452);
评论5