小程序单张图片和九宫格图片上传、预览、删除示例

最新推荐文章于 2026-04-25 14:43:39 发布

原创

最新推荐文章于 2026-04-25 14:43:39 发布 · 置顶 · 1.1w 阅读

标签

#小程序上传图片 #小程序九宫格图片 #小程序图片上传预览删除 #小程序单张上传图片

Demo下载地址：https://github.com/ybx13579/xiaochengxu-uploadImg

1、九宫格图片（一次性多张）上传预览删除

代码地址：https://blog.csdn.net/yangbingx/article/details/80498851#t8
效果图：

2、单张图片（单次）上传：（以下全部复制即可查看效果）

示例图：
这里写图片描述
Wxml:

<view class="gallery">
  <view class='tipTitle'>
    快去上传自己的照片吧
  </view>
  <view class='item-ot'>
    <view class="item">
      <!-- 添加按钮 -->
      <view class="addIcon" bindtap="chooseImage" wx:if="{
  
  {imgBoolean}}">
          <view class=''>+</view>
      </view>
      <!-- 上传的图 -->
      <view class='itemImg' >
        <image src="{
  
  {item}}" data-src="{
  
  {item}}" bindtap="previewImage"  mode="aspectFill" />
        <!-- 删除按钮 -->
        <view class="delete" bindtap="deleteImg" data-index="{
  
  {index}}">X</view>
      </view>
      <view class='boxStyle'></view>
    </view>
    <view class='itemTxt'>正面照</view>
  </view>
  <view class='uploadFinish'>
    <a class="uploadFinishBtn" href="/service/javasctipt:;"  bindtap="submit">提  交</a>
  </view> 
</view>

wxss:

/*画廊*/
.gallery {    
  width:100%;
  margin: 0 auto;
  display: flex;    
  justify-content: flex-start;    
  flex-wrap: wrap;
  background: #fffaf0;
}
/*每张图片所占容器*/
.item-ot{
  margin:0 auto;
  width: 100%;
  height: 100%;
}
.item {    
  position:relative;
  margin:0 auto;
  width:370rpx;
  height:490rpx;
  background:#eee;
  border:2rpx solid #f9c4c2;
  /* overflow:hidden; */
}
.itemImg{
  position: absolute;
  left: 0;
  top:0; 
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index:1;
}
.itemImg image{
  width: 100%;
  height: 100%;
}
/*add按钮*/
 .addIcon{
   position:absolute;
  left: 0;
  top: 0; 
  width: 100%;
  height: 100%;
  text-align:center;
  line-height:490rpx;
  font-size:80rpx;
  background: #fff;
  color: #999;
  z-index:2;
}
/*删除按钮*/
.delete {    
  position:absolute;
  right:0;
  top:0;
  /* background:#ccc; */
  opacity:1;
  height: 36rpx;
  font-size:22rpx;
  font