小程序九图(视频)选择组件分享

由于经常遇到九图选择的情况,前几个月在做自己的产品的时候封装了几个小组件.分享一下.

1.支持规定数量选择
2.自适应
3.支持长摁删除

usage:

image.png

增加删除通知 bindfileschange
文件列表初始化 files
文件类型 type 支持image和video
文件最大选择数量 number

demo:

image.png

code:

// components/upload/upload.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    type:{
      type:String,
      value:"image"//支持video和image
    },
    number:{
      type:Number,
      value:9
    },
    files:{
      type:Array,
      value:[]
    }

  },

  /**
   * 组件的初始数据
   */
  data: {
      files:[],
      imageWith:"33%"
  },
  ready:function(){
    wx.getSystemInfo({
      success:(res)=>{
        this.setData({
          imageWith:res.windowWidth/3-10
        })
      }
    })
  },

  /**
   * 组件的方法列表
   */
  methods: {
    addFile:function(){
      let {type,number}=this.properties
      let {files}=this.data
      if(type==="image"){
        wx.chooseImage({
          sizeType:["compressed"],
          count:number-files.length,
          success:(res)=>{
            this.setData({
                files:files.concat(...res.tempFilePaths)
            })
            this.notifyFilesChanged()
          }
        })
      }
      if(type=="video"){
        wx.chooseVideo({
          success:(res)=>{
            this.setData({
              files:files.concat(res.tempFilePath)
            })
            this.notifyFilesChanged()
          }
        })
      }
     
    },
    itemTap:function(e){
      const index = e.currentTarget.dataset.index;
      if(this.properties.type=="image"){
        wx.previewImage({
          current:this.data.files[index],
          urls:this.data.files
        })
      }
      //this.data.files.slice().splice(index,1)
    },
    itemTouchStart:function(e){
        const index = e.currentTarget.dataset.index;
        this.timeout=setTimeout(()=>{
            let oldData=this.data.files.slice()
            oldData.splice(index,1)
            this.setData({
              files:oldData
            })
            this.notifyFilesChanged()
        },500)
    },
    itemTouchEnd:function(){
      if(this.timeout){
        clearTimeout(this.timeout)
      }
    },
    notifyFilesChanged:function(){
      this.triggerEvent('fileschange',{files:this.data.files,type:this.properties.type})
    }
  }
})

<view class="wraper">
    <view class="fileList">
        <block wx:for="{{files}}" wx:if="{{type=='image'}}">
            <view data-index="{{index}}" bindtap="itemTap" bindtouchstart="itemTouchStart" bindtouchend="itemTouchEnd"  class="flex-image-item" style="width:{{imageWith}}px;height:{{imageWith}}px;">
                <image class="image" src="{{item}}"></image>
            </view> 
        </block>
        <block wx:for="{{files}}" wx:if="{{type=='video'}}">
                <view  bindtap="itemTap" bindtouchstart="itemTouchStart" bindtouchend="itemTouchEnd" class="flex-image-item" style="width:{{imageWith}}px;height:{{imageWith}}px;">
                    <video   class="image" src="{{item}}"></video>
                </view> 
        </block>
        <view class="addImageView" wx:if="{{files.length<number}}" style="width:{{imageWith}}px;height:{{imageWith}}px;">
            <image bindtap="addFile"  class="image"  src="add.png"></image>
        </view>
    </view>
</view>