微信小程式實現圖片是上傳、預覽功能
阿新 • • 發佈：2021-12-10
本文例項講述了微信小程式實現圖片上傳、刪除和預覽功能的方法，分享給大家供大家參考，具體如下：
這裡主要介紹一下微信小程式的圖片上傳圖片刪除和圖片預覽
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