微信小程序实现上传图片功能[通俗易懂]

微信小程序实现上传图片功能[通俗易懂]效果图WXML<viewclass=”img-wrap”><viewclass=”txt”>上传截图</view><viewclass=”imglist”><viewclass=”item”wx:for=”{{imgs}}”wx:key=”item”><imagesrc=”{{item}}”alt=””></image><viewclass=’d

大家好,又见面了,我是你们的朋友全栈君。

效果图

微信小程序实现上传图片功能[通俗易懂]微信小程序实现上传图片功能[通俗易懂]微信小程序实现上传图片功能[通俗易懂]

WXML

<view class="img-wrap">
  <view class="txt">上传图片</view>
  <view class="imglist">
    <view class="item" wx:for="{ 
    {imgs}}" wx:key="item">
      <image src="{ 
    {item}}" alt=""></image>
      <view class='delete' bindtap='deleteImg' data-index="{ 
    {index}}">
        <image src="../../../images/icon.png"></image>
      </view>
    </view>
    <view class="last-item" wx:if="{ 
    {imgs.length >= 3 ? false : true}}" bindtap="bindUpload">
      <text class="sign">+</text>
    </view>
  </view>
</view>

JS

data: { 
   
  imgs: [],
  count: 3
},
bindUpload: function (e) { 
   
  switch (this.data.imgs.length) { 
   
    case 0:
      this.data.count = 3
      break
    case 1:
      this.data.count = 2
      break
    case 2:
      this.data.count = 1
      break
  }
  var that = this
  wx.chooseImage({ 
   
    count: that.data.count, // 默认3
    sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图,默认二者都有
    sourceType: ["album", "camera"], // 可以指定来源是相册还是相机,默认二者都有
    success: function (res) { 
   
      // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
      var tempFilePaths = res.tempFilePaths
      for (var i = 0; i < tempFilePaths.length; i++) { 
   
        wx.uploadFile({ 
   
          url: 'https://graph.baidu.com/upload',
          filePath: tempFilePaths[i],
          name: "file",
          header: { 
   
            "content-type": "multipart/form-data"
          },
          success: function (res) { 
   
            if (res.statusCode == 200) { 
   
              wx.showToast({ 
   
                title: "上传成功",
                icon: "none",
                duration: 1500
              })

              that.data.imgs.push(JSON.parse(res.data).data)

              that.setData({ 
   
                imgs: that.data.imgs
              })
            }
          },
          fail: function (err) { 
   
            wx.showToast({ 
   
              title: "上传失败",
              icon: "none",
              duration: 2000
            })
          },
          complete: function (result) { 
   
            console.log(result.errMsg)
          }
        })
      }
    }
  })
},
// 删除图片
deleteImg: function (e) { 
   
  var that = this
  wx.showModal({ 
   
    title: "提示",
    content: "是否删除",
    success: function (res) { 
   
      if (res.confirm) { 
   
        for (var i = 0; i < that.data.imgs.length; i++) { 
   
          if (i == e.currentTarget.dataset.index) that.data.imgs.splice(i, 1)
        }
        that.setData({ 
   
          imgs: that.data.imgs
        })
      } else if (res.cancel) { 
   
        console.log("用户点击取消")
      }
    }
  })
}

WXSS

.wrap { 
   
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
}
.wrap .img-wrap { 
   
  font-size: 30rpx;
  color: #33373E;
  margin-bottom: 10rpx;
}
.wrap .img-wrap .txt { 
   
  margin-bottom: 20rpx;
}
.wrap .img-wrap .imglist { 
   
  display: flex;
  flex-wrap: wrap;
}
.wrap .img-wrap .imglist .item { 
   
  width: 150rpx;
  height: 150rpx;
  margin-right: 22rpx;
  margin-bottom: 10rpx;
  position: relative;
}
.wrap .img-wrap .imglist .last-item { 
   
  width: 150rpx;
  height: 150rpx;
  text-align: center;
  line-height: 146rpx;
  border: 2rpx dashed #8B97A9;
  box-sizing: border-box;
}
.wrap .img-wrap .imglist .item image { 
   
  width: 100%;
  height: 100%;
}
.wrap .img-wrap .imglist .item .delete { 
   
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  top: -14rpx;
  right: -12rpx;
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150595.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

  • 王思聪新浪微博微博_kimi乔任梁王思聪

    王思聪新浪微博微博_kimi乔任梁王思聪作者|天使不投资人本文经授权转载自虎嗅APP(ID:huxiu_com)iG夺冠了!iG夺冠了!——11月3日,社交媒体成为了年轻人欢乐的海洋,微博尤甚。根本不知道LOL、也不知道iG是什么的叔叔阿姨们,对这次刷屏一点都不反感,毕竟IG老板,人称“校长”的王思聪,为了庆祝自家战队创造历史,在11月6日发起了一场豪气抽奖:从参与人数就可以隔着屏幕感受到一万元奖金的巨大…

  • 简图记录-曾国藩家训 观后感「建议收藏」

    简图记录-曾国藩家训 观后感「建议收藏」简图记录 总结~材料 郦波教授的百家讲坛 和 部分相关书籍  一个人疑惑的时候,总是希望通求知如过阅读找到自己的答案,读史可以使人明智,历史总是有借鉴意义,相对于空谈鸡汤无疑更有说服力。我认为向周围的人学习是个人成长一个非常重要的手段,周围的人都是真实的而且在一定范围是可交流讨论的,相对一些当代的名人 他们的事迹往往都是经过加工 或 胡编 鸡汤意味更浓一些,那么另外一条路就是找一些古代的贤…

  • idea2021.12 激活_最新在线免费激活

    (idea2021.12 激活)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • java三大框架要学多久_新手学习SSH三大框架的几点建议[通俗易懂]

    java三大框架要学多久_新手学习SSH三大框架的几点建议[通俗易懂]说起三大框架,目前人们常用的是SSM,有人会认为SSH框架已经落后被淘汰了,其实这样说也不完全对。它毕竟实现了经典的MVC框架的基本功能,在有些项目还会用到。正因为用得不多,反而会出现很多问题。同时SSH在教学中也会被经常用到,笔者觉得SSH在教学中存在的意义在于能够帮助学习者理解经典MVC框架的原理。下面就简单谈一谈作为新手如何学习SSH。所谓SSH展开来讲包括了struts、spring、hi…

  • 用jquery实现表单验证_jquery验证插件

    用jquery实现表单验证_jquery验证插件功能强大的jQuery表单验证插件,适用于日常的E-mail、电话号码、网址等验证及Ajax验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则。jQueryValidationEnginev2.6.2:兼容IE6+,Chrome,Firefox,Safari,Opera10+,要求jQuery版本1.7以上。下载地址:http://code.ciao

  • 使用SQL Server 扩展事件来创建死锁的时间跟踪

    使用SQL Server 扩展事件来创建死锁的时间跟踪

    2021年11月26日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号