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

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

?

?

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> --><pickermode="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, // 默認9sizeType: ['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

總結

以上是生活随笔為你收集整理的微信小程序实现图片是上传、预览功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。