微信小程序——选择图片，上传图片，点击查看大图，删除图片

Page({data: {images: [],count: 3,  //设置最多三张图片},chooseImage: function () {var self = this;var images = self.data.images;var imagesShow = self.data.imagesShow;var count = self.data.count - images.length; //设置最多三张图片wx.chooseImage({count: count, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {for (var i = 0, h = res.tempFilePaths.length; i < h; i++) {images.push(res.tempFilePaths[i]);imagesShow.push(res.tempFilePaths[i]);self.setData({images: images,imagesShow: imagesShow})}// console.log(res)// 返回选定照片的本地文件路径列表，tempFilePath为图片路径数组可以作为img标签的src属性显示图片// self.uploadImg(res,//   function (url) {//     images.push(url);//     self.setData({//       images: images,//     })//     //console.log(self.data.images)//   })}})},clickImage: function (e) {let self = this;let current = e.target.dataset.src;wx.previewImage({current: current,urls: [current],fail: function () {console.log('fail')},complete: function () {console.info("点击图片了");},})},uploadImg: function (res, callback) {var tempFilePaths = res.tempFilePaths;//启动上传等待中...  wx.showToast({title: '上传中...',icon: 'loading',mask: true,duration: 10000})var uploadImgCount = 0;for (var i = 0, h = tempFilePaths.length; i < h; i++) {wx.uploadFile({url: app.globalData.Host + '/upload/upload',//app.globalData.Host为实际测试开发地址filePath: tempFilePaths[i],name: 'file',//这个就是传个后台图片路径所对应的keyformData: {},header: {'content-type': 'multipart/form-data'},success: function (res) {uploadImgCount++;var data = JSON.parse(res.data);//console.log(data)//console.log(data.data)if (data.data) {//如果是最后一张,则隐藏等待中  if (uploadImgCount == tempFilePaths.length) {wx.hideToast();}callback(data.data)} else {wx.hideToast();wx.showToast({title: '上传图片失败',icon: 'none',duration: 1500})}},fail: function (res) {wx.hideToast();wx.showToast({title: '上传图片失败',icon: 'none',duration: 1500})}});}},deleteImage: function (e) {let self = this;let index = e.target.dataset.index;let images = self.data.images;let imagesShow = self.data.imagesShow;images.splice(index, 1);imagesShow.splice(index, 1);this.setData({images: images,imagesShow: imagesShow,})},
})

<view class="add-image"><view class="images-box" wx:if="{{imagesShow.length>0}}" wx:for="{{imagesShow}}" wx:for-item="item" wx:key="image"><image data-index="{{index}}" data-src="{{item}}" src="{{item}}" bindtap="clickImage"></image><image class="delete-image" data-index="{{index}}" src="/images/img_del.png" bindtap="deleteImage"></image></view><view class="images-box" wx:if="{{imagesShow.length<count}}"><image src="/images/img_add.png" bindtap="chooseImage"></image></view></view>

添加图片按钮与删除图片按钮图片

微信小程序——选择图片，上传图片，点击查看大图，删除图片相关推荐

微信小程序选择和上传图片
文章目录微信小程序选择和上传图片微信小程序选择和上传图片选择和上传图片用到的api: wx.chooseImage() 和 wx.uploadFile() 具体实现代码如下: wx.choose ...
微信小程序——焦点图可预览查看大图缩放（多张可左右滑动）带页码 loading 加载中 / https不显示图
微信小程序焦点图,可以滑动预览大图缩放微信小程序自带焦点图swiper ,但是没有页码,只有小圆点,所以要自己写 (在查看大图时遇到一个问题,安卓上查看大图部分图不显示,经排查,发现不显示的图片地址 ...
微信小程序选择框问题小程序picker点击显示object range-key=这里写要显示的字段
微信小程序选择框问题小程序picker点击显示object range-key="这里写要显示的字段" <picker bindchange="bindClass ...
微信小程序云开发如何实现上传视频以及图片
微信小程序云开发如何实现上传视频以及图片最基础的数据库增删改查,上传到云存储即可实现,附源码 wxml文件 <button bindtap="upload">上传 ...
微信小程序选择视频，获取封面缩略图
使用微信小程序选择视频,且获取其封面使用微信小程序选择视频上传,且获取其封面背景名词参考效果图展示结束: 使用微信小程序选择视频上传,且获取其封面背景又一活儿,要从小程序里选择视频,上 ...
微信小程序：限制上传图片大小
微信小程序:限制上传图片大小 page({data:{Size:2*1024*1024,//定义大小}, )} //限制上传图片大小(2M)for(let i=0;i<res.tempFiles ...
微信小程序---地图导航（点击地址，可以进行导航）
微信小程序-地图导航(点击地址,可以进行导航) // 地图getLocation(e){var that = this,address = e.currentTarget.dataset.addres ...
《微信小程序案例6》点击图片上传，从本地相册选择或打开摄像头拍摄上传照片
点击一下相机图片实现上传本都相册图片或者打开摄像头拍照上传使用微信小程序API里面的wx.chooseImage 实现点击并上传图片后把上传的图片放入上面的虚线框里面. 方法: 在wx.choose ...
微信小程序 - 选择图片、预览图片、删除图片
为什么80%的码农都做不了架构师?>>> 小程序开发中你可能会遇到上传的图片首先会选择图片之后预览看下或者不满意需要删除图片,才会提交吧,这样应该是一个比较好的处理方式. 微信 ...
微信小程序选择图片（相册中选择/相机拍摄）
微信小程序中关于选择函数有专门的函数: wx.chooseImage(Object object) 从本地相册选择图片或使用相机拍照. 参数 Object object 属性类型默认值必填说明 ...

微信小程序——选择图片，上传图片，点击查看大图，删除图片

微信小程序——选择图片，上传图片，点击查看大图，删除图片相关推荐

最新文章

热门文章