微信小程序實現圖片選擇並預覽功能

這篇文章主要爲大家詳細介紹了微信小程序實現圖片選擇並預覽，具有一定的參考價值，感興趣的小夥伴們可以參考一下

本文實例爲大家分享了微信小程序實現圖片選擇並預覽的具體代碼，供大家參考，具體內容如下

(一)、功能說明

做的是一個意見反饋，用戶發表意見和上傳圖片，限制了最多隻能上傳三張圖片。

其他要點：textarea使用，底部保存按鈕固定

(二）、小程序接口說明

wx.chooseLocation(Object object)

從本地相冊選擇圖片或使用相機拍照。

(三)、效果圖

 

效果如下：

(四)、代碼展示

WXML頁面：

<view class="wrap">
 <view class="contant_wrap">
 <view class="contant">
  <textarea name="bindTextAreaBlur" bindblur="bindTextAreaBlur" auto-height placeholder="請描述您的問題或意見(必填)" maxlength="600"/>
 </view>
 <view class="contant-pic">
  <view class="pics-list" wx:for="{{pics}}" wx:key="" >
  <image src="{{item}}" class="uploadImg"></image>
  <image src="../../images/delete.png" class="uploadImg-error" data-img="{{item}}" bindtap='deleteImg'></image>
  </view>
  <image src="../../images/uploadImg.png" class="uploadImg {{isShow?'true':'hideTrue'}}" bindtap='uploadImage' ></image>
 </view>
 </view>
 <view class="phone">
 <input name="inputPhone" bindinput="inputPhone" placeholder="您的手機號或者郵箱(選填)" />
 </view>
 <view class="phone">
 <input name="inputName" bindinput="inputName" placeholder="您的稱呼(選填)" />
 </view>
 <view class="bottom" bindtap='submitAdvice'> 保存</view>
</view>

wxss頁面：

page{
 background-color: #efefef;
}
.wrap{
 width:90%;
 margin-left:5%;
 margin-top:10px;
 font-size:15px;
}
.contant_wrap{
 background-color: #fff;
}
.contant{
 width: 94%;
 margin: 0 auto
}
textarea{
 min-height:300rpx;
 max-height: 300rpx;
 padding: 10rpx 0;
 width: 100%;
 
}
.contant-pic{
 width: 94%;
 margin: 0 auto;
 height:80px;
 
}
.pics-list{
 width:73px;
 height:73px;
 float:left;
 margin-right:6px;
 
}
.uploadImg{
 width:70px;
 height:70px;
}
.uploadImg-error{
 height:25px;
 width:25px;
 position:relative;
 top:-80px;
 left:55px;
}
.hideTrue {
 display: none
}
.true {
 display: block
}
input{
 margin-top: 30rpx;
 height: 80rpx;
 padding-left: 20rpx;
 background-color: #fff;
}
.placeholder{
 color: #999999;
 font-size: 12pt;
}
.bottom{
 width:100%;
 height:40px;
 background-color:#e64340;
 position:fixed; bottom:0;
 color:#ffff;
 text-align: center;
 line-height: 40px;
}

js中：

// pages/advice/advice.js
Page({
 
 /** 頁面的初始數據*/
 data: {
 content:'',
 phone:'',
 name:'',
 advice:'',
 pics:[],
 isShow: true
 },
 /**獲取textarea值：評論內容 */
 bindTextAreaBlur:function(e){
 this.setData({
  advice:e.detail.value
 })
 },
 /**獲取手機或郵箱*/
 inputPhone: function (e) {
 this.setData({
  phone: e.detail.value
 })
 },
 /**獲取稱呼 */
 inputName: function (e) {
 this.setData({
  name: e.detail.value
 })
 },
 
 /**上傳圖片 */
 uploadImage:function(){
 let that=this;
 let pics = that.data.pics;
 wx.chooseImage({
  count:3 - pics.length,
  sizeType: ['original', 'compressed'], 
  sourceType: ['album', 'camera'], 
  success: function(res) {
  let imgSrc = res.tempFilePaths;
   pics.push(imgSrc);
  if (pics.length >= 3){
   that.setData({
   isShow: false
   }) 
  }
  that.setData({
   pics: pics
  })
  },
 })
 
 },
 
 /**刪除圖片 */
 deleteImg:function(e){
 let that=this;
 let deleteImg=e.currentTarget.dataset.img;
 let pics = that.data.pics;
 let newPics=[];
 for (let i = 0;i<pics.length; i++){
  //判斷字符串是否相等
  if (pics[i]["0"] !== deleteImg["0"]){
  newPics.push(pics[i])
  }
 }
 that.setData({
  pics: newPics,
  isShow: true
 })
 
 },
 
 /**提交 */
 submitAdvice:function(){
 let that=this;
 let advice = that.data.advice
 let name=this.data.name
 let phone=this.data.phone
 let pics=this.data.pics
 //保存操作
 }
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。