一个菜鸟的互联网技术分享博客
您的位置: 主页 > 微信小程序---手机照片上传和删除
advertisement

微信小程序---手机照片上传和删除

wxml:
  1. <view class="gallery">  
  2.     <!--显示图片-->  
  3.     <view class="item" wx:for="{{images}}" wx:key="index">  
  4.       <image src="{{item}}" data-src="{{item}}" bindtap="previewImage" mode="aspectFit" />  
  5.       <!-- 删除按钮 -->  
  6.       <view class="delete" bindtap="delete" data-index="{{index}}">  
  7.         <image src='../image/delete.png' mode="widthFix"></image>  
  8.       </view>  
  9.     </view>  
  10.     <!--添加图片-->  
  11.     <view class="item2" bindtap="chooseImage">  
  12.       <view class='addIcon'>+</view>  
  13.     </view>  
  14.   </view>  
wxss:
  1. .gallery {  
  2.   background: #fff;  
  3.   display: flex;  
  4.   justify-content: flex-start;  
  5.   flex-wrap: wrap;  
  6.   padding-bottom: 80px;  
  7. }  
  8. /*每张图片所占容器*/  
  9. .item {  
  10.   position: relative;  
  11.   margin: 10rpx 2%;  
  12.   width: 46%;  
  13.   height: 442rpx;  
  14.   background: #f3f3f3;  
  15. }  
  16. .item image {  
  17.   width: 100%;  
  18.   height: 100%;  
  19. }  
  20. /*add按钮*/  
  21. .item2 {  
  22.   margin: 10rpx 2%;  
  23.   width: 45%;  
  24.   height: 442rpx;  
  25.   text-align: center;  
  26.   line-height: 442rpx;  
  27.   font-size: 200rpx;  
  28.   background: #fff;  
  29.   color: #e4e5ea;  
  30.   border: 1px dashed #e4e5ea;  
  31. }  
  32. /*删除按钮*/  
  33. .delete {  
  34.   width: 100%;  
  35.   position: absolute;  
  36.   left: 0;  
  37.   bottom: 0;  
  38.   height: 80rpx;  
  39.   font-size: 22rpx;  
  40.   text-align: center;  
  41.   background-color: rgba(0000.3);  
  42.   display: none;  
  43. }  
  44. .delete image {  
  45.   width: 44rpx;  
  46.   margin-top: 22rpx;  
  47. }  
重点来了,js:
  1. Page({  
  2.   data: {  
  3.     images: [],  
  4.     pathsTmp: []  
  5.   },    
  6. // 本地选择照片上传  
  7.   chooseImage: function() {  
  8.     var that = this  
  9.     wx.chooseImage({  
  10.       count: 9,  
  11.       sizeType: ['compressed'],  
  12.       sourceType: ['album', 'camera'],  
  13.       success: function(res) {  
  14.         that.setData({  
  15.           //上传完并显示照片  
  16.           images: that.data.images.concat(res.tempFilePaths)  
  17.         });  
  18.       }  
  19.     })  
  20.   },  
  21.   // 删除照片  
  22.   delete: function(e) {  
  23.     var that = this;  
  24.     var index = e.currentTarget.dataset.index;  
  25.     var images = that.data.images;  
  26.     images.splice(index, 1);  
  27.     that.setData({  
  28.       images: images  
  29.     });  
  30.   },  
  31. })  

zhangren.online
上一篇:小程序提示框,加载框,模态框写法
下一篇:微信小程序中setData为数组动态赋值

您可能喜欢

​微信小程序---tab切换

​微信小程序---tab切换

回到顶部