1. 程式人生 > >微信小程式圖片上傳(開發例項)

微信小程式圖片上傳(開發例項)

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,
          });
        };
      },
    })
  },


})