微信公众号开发
微信小程序实现图片是上传、预览功能
本文主要是介绍微信小程序实现图片是上传、预览功能，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
本文实例讲述了微信小程序实现图片上传、删除和预览功能的方法，分享给大家供大家参考，具体如下：
这里主要介绍一下微信小程序的图片上传图片删除和图片预览
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
这篇关于微信小程序实现图片是上传、预览功能的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
小程序 单行显示，超出部分省略号显示的方法代码-icode9专业技术文章分享08-27
-
微信小程序如何获取到特种设备的刘海屏高度-icode9专业技术文章分享08-27
-
微信小程序如何获取苹果手机底部一横线高度信息方法代码-icode9专业技术文章分享08-27
-
微信小程序 顶部状态栏标签背景为none但还是看不到状态栏什么原因-icode9专业技术文章分享08-27
-
微信小程序全栈入门：从零开始的一站式指南08-21
-
微信小程序入门：轻松打造你的第一款小程序08-21
-
如何实现在微信小程序内卖药？线上药店商城小程序怎么做？08-10
-
uniapp小程序无痛刷新token方法-icode9专业技术文章分享08-08
-
在小程序中使用canvas绘制两个可拖拽交换位置的单元格代码示例-icode9专业技术文章分享08-08
-
小程序组件 监听数组传参 新增数组元素-icode9专业技术文章分享07-30
-
易优百度开源小程序使用教程-icode9专业技术文章分享07-25
-
易优微信开源小程序使用教程-易优CMS-icode9专业技术文章分享07-25
-
易优小程序备案教程-icode9专业技术文章分享07-21
-
小程序登录的code有什么限制-icode9专业技术文章分享07-20
-
在应用程序中获取 code，然后用于小程序登录是否可行？-icode9专业技术文章分享07-20
栏目导航
