微信小程序上传图片、长按删除及预览图片

 也是电商里做的上传评论图片之类的，如果用根据我文章中需要改的改一下就可以用了

首先是wxml

<view class="conts"><view class="img_box"><view class="imgs" wx:for="{{tempFilePaths}}" wx:key="index"><image src='{{item}}' bindlongpress="deleteImage" bindtap="listenerButtonPreviewImage" data-index="{{index}}" mode='widthFix' /></view><view class="imgs"><view class="images" bindtap="upload"><image src='/pages/img/shangchuantupian_l.png' mode='widthFix' /></view></view></view><view class="upload-img">上传图片</view>
</view>

接下来是wxss

.conts {height: auto;position: relative;margin: 0 auto;background-color: white;padding-bottom: 60rpx;
}.currentWordNumber {font-size: 28rpx;color: gray;position: absolute;right: 10rpx;bottom: 10rpx;
}.hint {font-size: 28rpx;position: absolute;left: 20rpx;bottom: 10rpx;color: #f60;
}/* 图片 */.img_box {width: 690rpx;position: relative;display: flex;flex-wrap: wrap;margin: 0 auto;margin-top: 5px;
}.imgs {width: 33.33333333%;display: flex;justify-content: center;margin-bottom: 20rpx;
}.imgs image {width: 90%;max-height: 212rpx;border: 1px solid rgba(214, 212, 212, 0.1);/* box-shadow: 5rpx 5rpx 1rpx 3rpx #e2e0e0; */
}.imgs .images {position: relative;
}.images button {width: 100%;height: 100%;position: absolute;top: 0;left: 0;
}.img_box .images {width: 80%;height: 80px;border: 1px solid #e8e8e8;border-radius: 4rpx;display: flex;align-items: center;justify-content: center;margin-bottom: 25px;
}.img_box .images>image {width: 60rpx;height: 60rpx;
}
.upload-img{font-size: 24rpx;width: 40%;display: flex;justify-content: center;margin-top: -115rpx;
}

最后是js

Page({/*** 页面的初始数据*/data: {},/*** 上传图片方法*/upload: function () {let that = this;wx.chooseImage({count: 9, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: res => {wx.showToast({title: '正在上传...',icon: 'loading',mask: true,duration: 1000})// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片let tempFilePaths = res.tempFilePaths;that.setData({tempFilePaths: tempFilePaths})/*** 上传完成后把文件上传到服务器*/var count = 0;for (var i = 0, h = tempFilePaths.length; i < h; i++) {//上传文件wx.uploadFile({url: app.URL,//这里输入你的接口路径filePath: tempFilePaths[i],//上面的文件路径name: 'img',//这个需要找后台拿，传入服务器的名字header: {"Content-Type": "multipart/form-data",},success: function (res) {console.log("k",res)},fail: function (res) {wx.hideToast();wx.showModal({title: '错误提示',content: '上传图片失败',showCancel: false,success: function (res) {}})}});}}})},/*** 预览图片方法*/listenerButtonPreviewImage: function (e) {let index = e.target.dataset.index;let that = this;wx.previewImage({current: that.data.tempFilePaths[index],urls: that.data.tempFilePaths,})},/*** 长按删除图片*/deleteImage: function (e) {var that = this;var tempFilePaths = that.data.tempFilePaths;var index = e.currentTarget.dataset.index; //获取当前长按图片下标wx.showModal({title: '提示',content: '确定要删除此图片吗？',success: function (res) {if (res.confirm) {console.log('点击确定了');tempFilePaths.splice(index, 1);} else if (res.cancel) {console.log('点击取消了');return false;}that.setData({tempFilePaths});}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},}）

这就是所有代码了，注释都在文中，应该一看就懂了吧。

微信小程序上传图片、长按删除及预览图片相关推荐

微信小程序长按图片不出现菜单_微信小程序实现长按删除图片的示例
说明最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹需求: 长按删除指定图片需要解决的问题长按事件如何表示出来? 如何获取当前长按元素的下标? 如何删除元素? 解决办法长 ...
uniapp实现h5、app、微信小程序三端pdf文件下载和预览
以下代码兼容三端,app,h5,微信小程序,经过个人测试手机端有两种方法,使用renderjs或者uniapp的api 两者的区别使用renderjs的写法,会提示用户是否下载文件,下载完成后用户 ...
微信小程序上传图片预览删除
微信小程序上传图片预览删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...
微信小程序上传图片及文件（上传、下载、删除及预览）
微信小程序上传附件上传文件及图片下载,预览.删除自定义封装组件哪儿用哪儿调用即可 wxml代码 <!-- <view>上传文件(我是子组件)</view> --& ...
微信小程序上传图片组件，多选+单选+预览+删除
微信小程序上传图片+预览+删除组件代码 HTML <view class="uploadImg-wrap"><view class="upload-f ...
微信小程序上传图片至服务器Springboot接收格式的问题
微信小程序上传图片至服务器Springboot 需求:通过微信小程序上传图片到服务器,保存至服务器. 实现 Wxml <button bindtap="choose"> ...
微信小程序上传图片到服务器总是失败_微信小程序上传图片过大导致请求失败的解决方法...
很多时候我们都会碰到小程序上传图片时因为图片过大而导致请求失败,同时出现各种各样的问题,那么今天来给大家写一个微信小程序上传图片过大导致请求失败的完美解决办法. 以云开发小程序图片检测为例,如果图片过 ...
微信小程序上传图片，并且把图片传给后端并返回到前端渲染数据。
微信小程序wxml标签样式如下: <view class="task_img"><block wx-if="{{wor ...
微信小程序 - 实现左滑动删除功能
微信小程序 - 实现左滑动删除功能效果图: 实现过程: 一.wxml布局这里我是先用了一个大盒子包裹小盒子,然后小盒子里面进行左右布局(左边为内容部分,右边为删除按钮)的方式实现的 <vie ...

微信小程序上传图片、长按删除及预览图片

微信小程序上传图片、长按删除及预览图片相关推荐

最新文章

热门文章