小程序图片上传(实例开发)

html部分

 <!-- 图片上传 -->
  <view class='uploadimg'>
    <view class='uploadimgBox'>
        <block wx:for="{{imgs}}" wx:if="{{imgs.length>0}}">
          <image class='addpic' data-index='{{index}}' src="{{item}}"></image>
        </block>
      <view class='addImg' wx:if="{{canChoose}}" bindtap='chooseImageTap'>
        <image src='../../images/add.png'></image>
      </view>
       <view class='addImg'wx:else bindtap='noChoose'>
        <image src='../../images/add.png'></image>
      </view>
      <view class='addImgMsg'wx:if="{{imgs.length<=0}}">
        <text>上传图片(症状部位、检查报告或其他资料)</text>
        <text>仅您和医生登录后可见</text>
      </view>

    </view>
  </view>

js部分

Page({

  /**
   * 页面的初始数据
   */
  data: {
  
    imgs: [],//本地图片地址数组
    message: '',
    submitTime: 1,
    tempFilePaths: {},//本地图片地址对象
    canChoose: true,//是否可选图片
    imgString: '',//图片拼接后的字符串
 
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
  //删除上传图片
  reom(e){
    let that = this
    let index = e.currentTarget.dataset.index
    let imgs = that.data.imgs
    for (var i = 0; i < imgs.length;i++){
      if (index == i){
        imgs.splice(i, 1);
        i--;
      }
    }
    that.setData({
      imgs: imgs,
    });
  },
  //添加上传图片
  chooseImageTap: function () {
    var that = this;
    wx.showActionSheet({
      itemList: ['从相册中选择', '拍照'],
      itemColor: "#00000",
      success: function (res) {
        if (!res.cancel) {
          if (res.tapIndex == 0) {
            that.chooseWxImage('album')
          } else if (res.tapIndex == 1) {
            that.chooseWxImage('camera')
          }
        }
      }
    })
  },
  noChoose: function () {
    var that = this;
    that.alert("最多只能上传6张哦~")
  },
  // 选取图片
  chooseWxImage: function (type) {
    var that = this;
    var imgsPaths = that.data.imgs;
    wx.chooseImage({
      sizeType: ['original', 'compressed'],
      sourceType: [type],
      success: function (res) {
        console.log(res);
        var imgsLimit = [];
        var tempFilePaths = that.data.tempFilePaths;
        var imgs = that.data.imgs;
        console.log(res.tempFilePaths);
        for (var i = 0; i < res.tempFilePaths.length; i++) {
          tempFilePaths[res.tempFilePaths[i]] = '';
          console.log(res.tempFilePaths[i])
          imgs.push(res.tempFilePaths[i]);
        };
        if (imgs.length > 6) {
          for (var i = 0; i < 6; i++) {
            imgsLimit.push(imgs[i]);
          }
          that.setData({
            imgs: imgsLimit,
            tempFilePaths: tempFilePaths,
          });
        } else {
          that.setData({
            imgs: imgs,
            tempFilePaths: tempFilePaths,
          });
        }
        if (imgsPaths.length >= 6) {
          that.setData({
            canChoose: false,
          });
        } else {
          that.setData({
            canChoose: true,
          });
        };
      },
    })
  },


})

猜你喜欢

转载自blog.csdn.net/weixin_42460570/article/details/81203206