本文实例讲述了微信小程序实现图片上传、删除和预览功能的方法,分享给大家供大家参考,具体如下:

这里主要介绍一下微信小程序的图片上传图片删除和图片预览

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

微信小程序实现图片是上传、预览功能相关推荐

  1. 小程序 | 微信小程序实现图片是上传、预览功能

    效果图 index.wxml <!-- 打开截图 开始 --> <view class="imageContainer"><view class=&q ...

  2. 微信小程序文件云存储-上传下载删除功能

    文件云存储 云存储提供高可用.高稳定.强安全的云端存储服务,支持任意数量和形式的非结构化数据存储,如视频和图片,并在控制台进行可视化管理.云存储包含以下功能: 存储管理:支持文件夹,方便文件归类.支持 ...

  3. 小程序上传服务器图片压缩,微信小程序压缩图片并上传到服务器(拿去即用)...

    /**压缩图片*/compressionImage(tempFilePaths, params) { let that= thiswx.getImageInfo({ src: tempFilePath ...

  4. 微信小程序用户头像编辑上传

    微信小程序用户头像编辑上传 近期接触了一个小程序项目,需要可以修改用户头像,默认获取用户当前微信头像,点击头像,可调用手机照相机或者本地相册,更换图片. html代码如下: js代码:

  5. 微信小程序开发之文件上传下载应用场景(附Demo源码)

    微信小程序开发之文件上传下载应用场景(附Demo源码),Demo为小相册应用,源码在附件中,本示例需要腾讯云支持. http://www.henkuai.com/forum.php?mod=viewt ...

  6. 微信小程序云开发-批量上传文件到云储存空间

    微信小程序开发 自己最近在玩微信小程序,准备记录一些自己遇到的,网络上没有对应教程(也许是自己没找到),或者是教程比较少的问题,然后给出自己的解决方案 目录 微信小程序开发 问题 一.云储存是什么? ...

  7. 微信小程序云开发实现上传文件和预览下载文件

    微信小程序云开发实现上传文件和预览下载文件 一.前言 目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的p ...

  8. 微信小程序+SpringBoot实现文件上传与下载

    微信小程序+SpringBoot实现文件上传与下载 1.文件上传 1.1 后端部分 1.1.1 引入Apache Commons FIleUpload组件依赖 1.1.2 设置上传文件大小限制 1.1 ...

  9. 微信小程序java中文乱码_如何解决微信小程序显示中文无法上传或者出现乱码的问题?...

    今天小编给大家讲解如何解决微信小程序显示中文无法上传或者出现乱码的问题?有需要或者有兴趣的朋友们可以看一看下文,相信对大家会有所帮助的. 在formData中对文字进行编码,使用encodeURI() ...

最新文章

  1. R语言数据类型:Logical、Numeric、Integer、Complex、Character、Vectors、Lists、Matrices、Arrays、Factors、DataFrames
  2. TensorFlow for Hackers - Part III
  3. 北斗导航 | 北斗卫星导航信号串行捕获算法MATLAB仿真(附源代码)
  4. 最短路径之--floyd算法--多源最短路径
  5. 忽如一夜冬风来,团队忽然就解散了
  6. 基本数据类型与字符串的转换
  7. Java中对List集合排序的两种方法
  8. rn 0.57打包常见错误_linux管道命令介绍及常见用于场景
  9. 常见数据分析误区:不要让数据误导你!
  10. 法兰克焊接机器人编程入门_焊接机器人编程入门与编程技巧介绍
  11. matlab数字图像处理常用操作
  12. 【React】1332- 2022 年值得推荐的 React 库
  13. es的bucket和metric
  14. 实战演习(二)——网站点击流数据分析
  15. Tushare财经数据调取方法(行情数据)
  16. 全屏滚动插件之 fullpage.js
  17. MySQL50题-第6-10题
  18. 批处理判断操作系统的文件系统类型
  19. P1717 Finger guessing
  20. 免费的期刊论文文献检索网站(收集整理)

热门文章

  1. QString::QString 中文乱码
  2. subversion commit 报错A checksum mismatch occurred
  3. ORA-25153: Temporary Tablespace is Empty
  4. [译]ECMAScript:ES.next和ES6以及ES Harmony之间的区别
  5. Activemq 安全机制以及稳定性研究
  6. asp.net小技巧:摆脱路径的困扰(三)
  7. Spring boot 和Vue开发中CORS跨域问题
  8. STL priority实例
  9. JavaScript开发规范 0.01版
  10. MySQL里的wait_timeout