微信小程序图片(单图多图上传显示)

微信小程序上传图片组件自定义

最近在做微信小程序开发的时候，遇到了一个问题，就是图片上传于显示问题，微信自带的感觉用起来还是不方便，于是就萌生了自定义图片上传于显示组件

废话不多说直接上代码

首先创建一个imageview component组件，

1.wxml

<view class="img-list">

  <view class="item" wx:for="{{imgList}}" wx:key="index" >

    <image class="img" src="{{item}}" bindtap="preview" data-img="{{item}}" mode="aspectFill"></image>

    <view wx:if="{{showDel}}" class="del" bindtap="del" data-index="{{index}}">

      <image src="../../images/icon_delete_white.png"></image>

    </view>

  </view>

  <view wx:if="{{imgList.length < maxCount && !disable}}" bindtap="upload" class="add item"></view>

</view>

2.wxss

.img-list {

  display: flex;

  align-items: flex-start;

  flex-direction: row;

  flex-wrap: wrap;

}

.item{

  position: absolute;

}

.img-list .item {

  width: 160rpx;

  margin-left: 10rpx;

  position: relative;

}

.img-list .item:first-child {

  margin: 0;

}

.img-list .img {

  width: 160rpx;

  height: 160rpx;

  border-radius: 10rpx;

  /* background-color: rgba(0, 0, 0, .1); */

  overflow: hidden;

}

.img-list .item .del {

  text-align: center;

  color: #ffffff;

  background: #FF3434;

  position: absolute;

  top: 0;

  right: 0;

  z-index: 999;

  border-top-right-radius: 10rpx;

}

.del image{

  width: 28rpx;

  height: 25rpx;

}

.img-list .add {

  display: inline-block;

  position: relative;

  width: 160rpx;

  height: 160rpx;

  border-radius: 10rpx;

  background-color: rgba(0, 0, 0, .1);

}

.img-list .add::after {

  display: block;

  position: absolute;

  left: 50%;

  top: 50%;

  content: '+';

  margin-top: -4rpx;

  font-size: 80rpx;

  color: white;

  transform: translate(-50%,-50%);

}

3.json

{

  "component": true,

  "usingComponents": {}

}

4.js文件

Component({

  /**

   * 组件的属性列表

   */

  properties: {

    imgs: {

      type: String,

      value: ''

    },

    maxCount: { // 最大上传数量

      type: Number,

      value: 9

    },

    disable: { // 是否禁用

      type: Boolean,

      value: false

    },

    maxSize: { // 图片大小，以 M 为单位

      type: Number,

      value: 10

    },

    showDel: {

      type: Boolean,

      value: true

    },

    imgList: {

      type: Array,

      value: []

    },

  },

  /**

   * 组件的初始数据

   */

  data: {

    imgList: [],

    showDel: false

  },

 

  /**

   * 在组件实例进入页面节点树时执行

   */

  attached() {

    this.setImgList(this.data.imgs.split(';').filter(item => item))

  },

 

  /**

   * 组件的方法列表

   */

  methods: {

    setImgList(data) {

      this.setData({

        imgList: data

      })

      // 给父组件传递图片

      this.triggerEvent('upimgs', this.data.imgList.join(';'))

    },

    upload() {

      wx.chooseImage({

        count: 1,

        sizeType: ['original', 'compressed'],

        sourceType: ['album', 'camera'],

        success: (res) => {

          //res.tempFilePaths 返回图片本地文件路径列表

          var imgList = this.data.imgList;

          // 限制上传图片大小

          if (this.data.maxSize * 1024 * 1024 < res.tempFiles[0].size) {

            wx.showToast({

              title: "上传文件过大，不可超过" + this.data.maxSize + "M！",

              icon: "none",

            });

            return false

          }

          var access_token = wx.getStorageSync('access_token')

          if (res.tempFilePaths.length > 0) {

            for (var i = 0; i < res.tempFilePaths.length; i++) {

              wx.uploadFile({

            //网络请求

              })

            }

          }

 

        }

      })

    },

    // 预览图片

    preview(e) {

      wx.previewImage({

        current: e.currentTarget.dataset.img, // 当前显示图片的http链接

        urls: [e.currentTarget.dataset.img] // 需要预览的图片http链接列表

      })

    },

    // 删除图片

    del(e) {

      var imgList = this.data.imgList

      imgList.splice(e.currentTarget.dataset.index, 1)

      this.setImgList(imgList)

    }

  }

})

用法，首先在需要调用的页面的。json文件中引入组件

其次在页面中引用如下

   <imageview imgs="{{imgList }}" maxCount="{{maxCount}}" bind:upimgs="upImgs"/>

拍照上传之后的回调，可以在当前页面中的。js文件获取

 upImgs: function (e) {

    console.log("上传图片回传结果==" + e.detail)

    this.setData({

      filePaths: e.detail,

    })

  },

到此就完成了图片上传自定义组件

组件中需要的图片请按自己需求查找