微信小程序多图上传组件

• 组件部分
  html

view class="up-img-wrapper">

    <!-- <view class="add-img-word">
        <b>添加图片 (大小在2m内)</b>
    </view> -->
    <view class='i-wrapper'>
        <view class='img-wrapper' wx:for="{{img_path}}" wx:key wx:if="{{index<count}}">
            <image src="{{item}}" mode="aspectFill" data-idx="{{index}}" bindtap="handleImagePreview"></image>
            <view class='del' data-idx="{{index}}" bindtap="removeImage">删除图片</view>
        </view>
        <view class='img-wrapper add-img-wrapper' bindtap="chooseImage" wx:if="{{img_path.length<count}}">
            <view class='btn'>添加图片</view>
        </view>
    </view>

</view>

css

/* 图片上传 */
.up-img-wrapper{margin-top: 40rpx;}
.add-img-word{font-size: 28rpx;color: #555;line-height: 2em}
.i-wrapper{width: 100%;display: flex;flex-wrap: wrap;}
.i-wrapper>.img-wrapper{width:30%;margin-right:5%;margin-top: 20rpx;}
.img-wrapper:nth-child(3n+0){margin-right:0;} 
.img-wrapper image {width:100%; height:30vw; display:block; border-radius:0.2rem;}
.del {font-size:0.8rem; color:#888; text-align:center; margin-top:0.4rem; border:1px solid #ddd; border-radius:0.2rem; padding:0.2rem 0px; }
.btn {background:#eee; border:1px solid #ddd; color:#888; width:100%; height:30vw; line-height:30vw; text-align:center; font-size:0.8rem; border-radius:0.2rem;}

js

// components/upImg/upImg.js
Component({
    options: {
        styleIsolation: 'isolated'
    },
    /**
     * 组件的属性列表
     */
    properties: {
        count: { //最多选择图片的张数，默认9张
            type: Number,
            value: 9
        },
    },

    /**
     * 组件的初始数据
     */
    data: {
        img_path: [],
        
    },

    /**
     * 组件的方法列表
     */
    methods: {
      
        chooseImage(e) { //图片选择
            wx.chooseImage({
                sizeType: ['compressed'],
                sourceType: ['album', 'camera'],
                count: this.data.count,
                success: res => {
                    let t = JSON.parse(JSON.stringify(this.data.img_path))
                    console.log(t)
                    for (let i = 0; i < res.tempFilePaths.length && t.length<this.data.count; i++) {
                        t.push(res.tempFilePaths[i]);
                    }
                    this.setData({
                        img_path: t
                    });
                },
                complete:res=>{
                    let img_path=this.data.img_path
                    console.log(img_path)
                    var myEventDetail = { img_path } // detail对象，提供给事件监听函数
                    var myEventOption = {} // 触发事件的选项
                    this.triggerEvent('myevent', myEventDetail, myEventOption)
                }
            })
        },
        handleImagePreview(e) { //图片浏览
            wx.previewImage({
                current: this.data.img_path[e.target.dataset.idx],
                urls: this.data.img_path
            });
        },
        removeImage(e) { //图片删除
                let i = e.target.dataset.idx;
                let t = JSON.parse(JSON.stringify(this.data.img_path));
                t.splice(i, 1);
                this.setData({
                    img_path: t
                });
                let img_path = this.data.img_path
                var myEventDetail = { img_path } // detail对象，提供给事件监听函数
                var myEventOption = {} // 触发事件的选项
                this.triggerEvent('myevent', myEventDetail, myEventOption)
        },
       
    }
})

json

{
    "component": true,
    "usingComponents": {}
}

用组件的页面
html

<up-img bindmyevent="onMyEvent" count='{{countPic}}'></up-img>

js

// pages/index/doctorDetail/order/order.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    img_path: [],
    now_up: 0,
    image_url: [],
    countPic:6
  },

  onMyEvent: function (e) {//多图上传组件事件
    console.log(e.detail)// 自定义组件触发事件时提供的detail对象
    this.setData({
      img_path: e.detail.img_path
    })
  },
  upWorkData() {//表单数据上传
    let up_data = this.data.up_data
    if (up_data["intro"] == "" || up_data["intro"] == undefined) {
      app.alert("请填写工作描述")
    } else {
      wx.request({
        url: appUrl + "/index.php/index/App/activityApp",
        data: {
          //   user_id:wx.getStorageSync("token"),
          id: this.data.activity_id,
          info: up_data.intro,
          img: this.data.image_url
        },
        success: (res) => {
          console.log(res)
          let info = res.data.info
          wx.navigateBack({
            delta: 1,
            success: () => {
              app.alert(info)
            }
          })
        },
      })
    }

  },
  img_up() { //图片上传
    if (this.data.img_path.length == 0) {
      app.alert('请上传图片')
    } else {
      wx.uploadFile({
        url: appUrl + "/index.php/index/App/upload_img",
        filePath: this.data.img_path[this.data.now_up],
        name: 'img',
        success: (res) => {
          console.log(res.data)
          let info = JSON.parse(res.data);
          let image_url = this.data.image_url
          console.log(info)
          if (info.state) {
            image_url.push(info.img);
            console.log()
            this.setData({
              image_url
            });
          }
        },
        complete: (res) => {
          let t = Number(this.data.now_up) + 1;
          if (t === this.data.img_path.length) {
            this.upWorkData()
          } else {
            this.setData({
              now_up: t
            });
            this.img_up();
          };
        }
      });
    }

  },
})

json

{
  "usingComponents": {
    "up-img":"/conponents/upImg/upImg"
  }
}