小程序选择、预览、删除、上传图片

原创 黄良钵  2018-03-16 11:10  阅读 409 次 评论 6 条

小程序选择、预览、删除、上传图片

上次写了篇上传图片的文章:小程序上传图片及预览图片 ,还缺少一点功能,今天做了另一种删除删除样式,加上上传图片到服务器功能;

wxml

  1. <!-- 图片上传模块 -->
  2. <view class='upImage' wx:if="{{isImage}}">
  3.   <view class='upImage-list'>
  4.     <view class='image-li' bindtap='chooseImage'>
  5.       <view class='iconfont icon-xiangji'></view>
  6.     </view>
  7.     <view class='image-li' wx:for="{{imgs}}" wx:key="imgs">
  8.       <image bindtap='previewImage' data-index='{{index}}' mode='aspectFill' src='{{item}}'></image>
  9.       <text bindtap='delImage' data-index='{{index}}'>删除</text>
  10.     </view>
  11.   </view>
  12.   <button bindtap='uploadImage'>上传图片</button>
  13. </view>

wxss

  1. /* 上传图片 */
  2. .upImage {
  3.   padding10px;
  4.   margin-top10px;
  5. }
  6. .upImage-list {
  7.   display: flex;
  8.   flex-wrap: wrap;
  9. }
  10. .image-li {
  11.   margin-right10px;
  12.   margin-bottom10px;
  13.   width: calc((100vw - 50px) / 4);
  14.   height: calc((100vw - 50px) / 4);
  15.   border1px solid #fff;
  16.   border-radius: 10px;
  17.   overflowhidden;
  18.   positionrelative;
  19. }
  20. .image-li:first-child {
  21.   display: flex;
  22.   align-items: center;
  23.   justify-contentcenter;
  24.   color#eee;
  25. }
  26. .image-li:first-child view {
  27.   font-size: 100rpx;
  28. }
  29. .image-li:nth-child(4n) {
  30.   margin-right: 0;
  31. }
  32. .image-li image {
  33.   width: 100%;
  34.   height: 100%;
  35. }
  36. .image-li text {
  37.   positionabsolute;
  38.   text-aligncenter;
  39.   bottombottom: 0;
  40.   left: 0;
  41.   width: 100%;
  42.   font-size: 24rpx;
  43.   background: rgba(0, 0, 0, 0.5);
  44.   color#fff;
  45. }
  46. .upImage button{
  47.   background: rgba(0, 0, 0, 0);
  48.   color#fff;
  49.   border1px solid #fff;
  50. }

JS

  1. data:{
  2.     imgs: [] , // 图片临时储存
  3. },
  4. /**
  5.    * 选择图片点击
  6.    */
  7.   chooseImage:function(){
  8.     let that = this;
  9.     wx.chooseImage({
  10.       // count: 1, // 默认9
  11.       sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  12.       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  13.       success: function (res) {
  14.         // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  15.         var tempFilePaths = res.tempFilePaths
  16.         let imgs = that.data.imgs;
  17.         for(let i =0; i < tempFilePaths.length; i++){
  18.           imgs.push(tempFilePaths[i])
  19.         }
  20.         that.setData({
  21.           imgs: imgs
  22.         })
  23.       }
  24.     })
  25.   },
  26.   /**
  27.    * 预览图片
  28.    */
  29.   previewImage:function(e){
  30.     let _index = e.currentTarget.dataset.index;
  31.     let list = this.data.imgs;
  32.     let current = list[_index];
  33.     wx.previewImage({
  34.       current: current, // 当前显示图片的http链接
  35.       urls: list // 需要预览的图片http链接列表
  36.     })
  37.   },
  38.   /**
  39.    * 删除图片
  40.    */
  41.   delImage:function(e){
  42.     let _index = e.currentTarget.dataset.index;
  43.     let previewImage = this.data.imgs;
  44.     console.log(previewImage)
  45.     previewImage.splice(_index, 1);
  46.     this.setData({
  47.       imgs: previewImage
  48.     })
  49.   },
  50.   /**
  51.    * 上传图片
  52.    */
  53.   uploadImage:function(e){
  54.     let imgs = this.data.imgs;
  55.     for (let i = 0; i < imgs.length; i++){
  56.     wx.uploadFile({
  57.       url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址
  58.       filePath: imgs[i],
  59.       name: 'file',
  60.       formData: {
  61.         'user': 'test'
  62.       },
  63.       success: function (res) {
  64.         var data = res.data
  65.         //do something
  66.       }
  67.     })
  68.     }
  69.   },
关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

  1. TrojanSun
    TrojanSun 【VIP 1】来自天朝的朋友 谷歌浏览器 Windows 7  @回复

    大佬好厉害 原创的! 支持。

    • 黄良钵
      黄良钵【站长】2018-03-27 at 17:11来自天朝的朋友 谷歌浏览器 Linux   回复

      @TrojanSun你才是厉害!我这是菜鸟级别的

  2. taolaosan
    taolaosan 【VIP 1】来自天朝的朋友 QQ浏览器  OPPO A57 Build/MMB29M 中国 · 江西 · 南昌 · 移动 @回复

    请问如何增加搜索词条

    • 黄良钵
      黄良钵【站长】2018-03-25 at 23:17来自天朝的朋友 谷歌浏览器 Windows 10 中国 · 海南 · 海口 · 联通  回复

      @taolaosan什么?增加什么搜索词条?

  3. 善行法脉
    善行法脉 【VIP 1】 谷歌浏览器 Windows 7 中国 · 北京 · 北京 · 皓宽网络 @回复

    在国内用中文域名的还挺少的呢,博客很不错,和我用的一样模板。。。

    • 黄良钵
      黄良钵【站长】2018-03-22 at 15:25来自天朝的朋友 谷歌浏览器 Linux 中国 · 海南 · 海口 · 移动  回复

      @善行法脉基本上没什么人用中文域名的 [嘻嘻]