微信小程序之上传图片和图片预览

子钦加油

于 2019-10-30 16:31:00 发布

阅读量498

点赞数

服务器拼团：点我去阿里云购买

本文链接：https://blog.csdn.net/weixin_37557729/article/details/107012250

版权

这几天一直负责做微信小程序这一块，也可以说是边做边学习吧，把自己做的微信小程序的一些功能分享出来，与大家探讨一下，相互学习相互进步。

先看下效果图

只写了一下效果样式的话希望大家不要太在意，下面马路杀手要开车了。

1.wxml排版和布局

这个排版非常简单就是一个按钮button加个图片image标签而已，这个相信有点基础的人都能理解，直接放代码：

<view class="container">
  <view class="userinfo">
    <button bindtap="upload"> 上传图片 </button>
  </view>
  <block wx:for="{
   {tempFilePaths}}" wx:key="{
   {index}}">
    <image src="{
   {item }}" bindtap="listenerButtonPreviewImage" data-index="{
   {index}}" style="width: 100%;"/>
  </block>
</view>