本文實例講述了微信小程序實現圖片上傳、刪除和預覽功能的方法，分享給大家供大家參考，具體如下：
這里主要介紹一下微信小程序的圖片上傳圖片刪除和圖片預覽
1、可以調用相機也可以從本地相冊選擇
2、本地實現微信小程序的上傳照片、預覽照片的功能
3、利用wx.chooseImage方法
4、附帶了一些表單樣式（可以忽略）
代碼如下
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 () {
}
})