微信小程序實現圖片是上傳、預覽功能

本文實例講述了微信小程序實現圖片上傳、刪除和預覽功能的方法，分享給你們供你們參考，具體以下：

這裏主要介紹一下微信小程序的圖片上傳圖片刪除和圖片預覽

 

 

一、能夠調用相機也能夠從本地相冊選擇

二、本地實現微信小程序的上傳照片、預覽照片的功能

三、利用wx.chooseImage方法

四、附帶了一些表單樣式（能夠忽略）

代碼以下

wxml文件

  <view class="numberInfo">
 ** 信息錄入</view>

<view class="container">

  <view class="lineHeight" type="number">手機號
     <input class='input' placeholder='請輸入手機號'></input>
  </view>
    <view class="lineHeight" type="text">姓名
     <input class='input-15' placeholder='姓名'></input>
  </view>
  <view class="lineHeight" type="text">公司名稱
     <input class='input-7' placeholder='公司名稱'></input>
  </view>
  <view class="lineHeight">公司電話
      <input class='input-7' type='number' placeholder='區號'></input>
  </view>
  <view class="lineHeight" type='number'>分機號碼
      <input class='input-7' placeholder='公司分機號碼（選填）'></input>
  </view>
  <view class="lineHeight" type="text">
      <!-- <input class='input-7'></input> -->
    <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"  bindtap='clearFont'>
            產品/服務 
            <text class='select' >{{placeholder}} {{array[index]}}</text>
    </picker>
  </view>
  <view class="lineHeight" type="text">
      <!-- <input class='input-7' placeholder='請選擇'></input> -->
      <view class="section">
        <!-- <view class="section__title">省市區選擇器</view> -->
          <picker
             mode="region"
             bindchange="bindRegionChange"
             value="{{region}}"
             custom-item="{{customItem}}"
          >
            <view class="picker">
              公司地址 <text class='select'>{{region[0]}}，{{region[1]}}，{{region[2]}}</text>
            </view>
         </picker>
  </view> 
  </view>
  <view class="lineHeight" type="text">具體地址
      <input class='input-7' placeholder='具體地址'></  input>
  </view>
</view>


<view class="weui-uploader">
  <view class="img-v weui-uploader__bd">
    <view class='pic' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
        <image class='weui-uploader__img ' 
                src="{{item}}" 
                data-index="{{index}}" mode="aspectFill" bindtap="previewImg">
                  <icon type='cancel' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></icon>
        </image>
    </view>
    
      <!-- 用來提示用戶上傳圖片 -->
      <view class="weui-uploader__input-box pic" bindtap="chooseImg"> </view>
  </view>
  <button class="upload-img-btn" bindtap="chooseImg" type='primary'>拍照  / 上傳</button>
</view>

　　

css文件

/* pages/upload/upload.wxss */
.img{
  display: inline-block;
}

.pic {
float:left;
position:relative;
margin-right:9px;
margin-bottom:9px;
}

.delete-btn{
  position: absolute;
  top: 0;
  right: 0;
}

.weui-uploader{
  padding: 10rpx;
}


.lineHeight {
  width: 100%;
  line-height: 80rpx;
  border-bottom: 1px solid #ccc;
  font-size: 30rpx;
}
.container {
  padding: 0;
  align-items: left;
  padding-left: 15rpx;
}
.numberInfo {
  font-size: 24rpx;
  text-indent: 15rpx;
  border-bottom: 1px solid #ccc;
}

/* .input {
  display: inline-block;
  border: 1px solid #ccc;
  line-height: 80rpx;
  vertical-align: middle;
  margin-left: 11%;
  width: 75%;
} */
.input,
.input-7 ,
.input-15{
  margin-left: 7%;
  display: inline-block;
  /* border: 1px solid #ccc; */
  line-height: 80rpx;
  vertical-align: middle;
  width: 75%;
}
.input{
  margin-left: 11%;
}

button {
  width: 100%;
  margin-top: 30rpx;
}
.select{
  margin-left: 7%;
  color: #666;
}

.input-15{
  margin-left:15%;
}

　　

js文件

// pages/upload/upload.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    imgs: [],
    placeholder: '請選擇',
    array: ['發電機', '充電器', '引擎動力', '其餘'],
    objectArray: [
      {
        id: 0,
        name: '發電機'
      },
      {
        id: 1,
        name: '充電器'
      },
      {
        id: 2,
        name: '引擎動力'
      },
      {
        id: 3,
        name: '其餘'
      }
    ],

    multiIndex: [0, 0, 0],
    date: '2016-09-01',
    time: '12:01',
    region: ['廣東省', '廣州市', '海珠區'],
    customItem: '所有'
  },
  // 上傳圖片
  chooseImg: function (e) {
    var that = this;
    var imgs = this.data.imgs;
    if (imgs.length >= 9) {
      this.setData({
        lenMore: 1
      });
      setTimeout(function () {
        that.setData({
          lenMore: 0
        });
      }, 2500);
      return false;
    }
    wx.chooseImage({
      // count: 1, // 默認9
      sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
      sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
      success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath能夠做爲img標籤的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths;
        var imgs = that.data.imgs;
        // console.log(tempFilePaths + '----');
        for (var i = 0; i < tempFilePaths.length; i++) {
          if (imgs.length >= 9) {
            that.setData({
              imgs: imgs
            });
            return false;
          } else {
            imgs.push(tempFilePaths[i]);
          }
        }
        // console.log(imgs);
        that.setData({
          imgs: imgs
        });
      }
    });
  },
  // 刪除圖片
  deleteImg: function (e) {
    var imgs = this.data.imgs;
    var index = e.currentTarget.dataset.index;
    imgs.splice(index, 1);
    this.setData({
      imgs: imgs
    });
  },
  // 預覽圖片
  previewImg: function (e) {
    //獲取當前圖片的下標
    var index = e.currentTarget.dataset.index;
    //全部圖片
    var imgs = this.data.imgs;
    wx.previewImage({
      //當前顯示圖片
      current: imgs[index],
      //全部圖片
      urls: imgs
    })
  },



  bindPickerChange(e) {
    console.log('picker發送選擇改變，攜帶值爲', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  clearFont() {
    this.setData({
      placeholder: ''
    })
  },

  bindRegionChange(e) {
    console.log('picker發送選擇改變，攜帶值爲', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})