本文實例講述了微信小程序實現圖片上傳、刪除和預覽功能的方法，分享給大家供大家參考，具體如下：
這里主要介紹一下微信小程序的圖片上傳圖片刪除和圖片預覽
1、可以調用相機也可以從本地相冊選擇
2、本地實現微信小程序的上傳照片、預覽照片的功能
3、利用wx.chooseImage方法
4、附帶了一些表單樣式（可以忽略）
代碼如下
wxml文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<
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文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
/* 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文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
|
// 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 () {
}
})
|
https://www.cnblogs.com/m1754171640/p/10525826.html