微信小程序怎样制作上传图片功能 并可多选 查视和删除
|
这篇文章主要介绍了“微信小程序怎样制作上传图片功能，并可多选、查看和删除”相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇微信小程序怎样制作上传图片功能，并可多选、查看和删除文章都会有所收获，下面我们一起来看看吧。 具体内容如下 用到的api wx.chooseMedia(); 用于拍摄或从手机相册中选择图片或视频 功能：点击上传图片，可多选，或者拍照上传；点击图片放大查看；长按图片删除 json里面引用weui的组件uploader { "navigationBarTitleText": "评价工单", "usingComponents": { "mp-uploader": "weui-miniprogram/uploader/uploader", "mp-cells": "weui-miniprogram/cells/cells", "mp-cell": "weui-miniprogram/cell/cell" } } wxml <view class="weui-uploader"> <view class="img-v weui-uploader__bd"> <view class='pic' wx:for="{{technicianAssessPicture}}" wx:for-item="item" wx:key="*this"> <image class='weui-uploader__img ' src="{{item}}" data-index="{{index}}" mode="aspectFill" bindlongpress="deleteTechnician" bindtap="previewTechnician"> </image> </view> <view class="weui-uploader__input-box pic" bindtap="technicianImg"> </view> </view> </view> js data:(){ technicianAssessPicture: [], // 技师图片 } // 上传技师图片 technicianImg: function (e) { var that = this; var technicianAssessPicture = this.data.technicianAssessPicture; if (technicianAssessPicture.length >= 9) { this.setData({ lenMore: 1 }); setTimeout(function () { that.setData({ lenMore: 0 }); }, 2500); return false; } wx.chooseMedia({ count: 9, // 默认9 mediaType: ['image','video'], // 文件类型 // image 只能拍摄图片或从相册选择图片 // video 只能拍摄视频或从相册选择视频 // sizeType: ['original', 'compressed'], //所选的图片的尺寸 original原图，compressed压缩图 // 仅对 mediaType 为 image 时有效，是否压缩所选文件 sourceType: ['album', 'camera'], //图片和视频选择的来源 maxDuration: 30, // 拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 60s 之间。不限制相册。 camera: 'back', // 仅在 sourceType 为 camera 时生效，使用前置或后置摄像头 // back 使用后置摄像头;front 使用前置摄像头 success: function (res) { var tempFilePaths = res.tempFiles; var technicianAssessPicture = that.data.technicianAssessPicture; for (var i = 0; i < tempFilePaths.length; i++) { if (technicianAssessPicture.length >= 9) { that.setData({ technicianAssessPicture: technicianAssessPicture }); return false; } else { const tempFilePaths1 = tempFilePaths.map(v=>v.tempFilePath) // tempFilePaths数据是json数组，我们需要的是普通数组需要处理一下 technicianAssessPicture.push(tempFilePaths1[i]); } } that.setData({ technicianAssessPicture: technicianAssessPicture }); console.log(that.data.technicianAssessPicture, 'hhhhhhhhhhhhhhhhhhhhh'); } }); }, 处理后打印出来的数据 预览，删除 // 预览图片 previewTechnician: function (e) { //获取当前图片的下标 var index = e.currentTarget.dataset.index; //所有图片 var technicianAssessPicture = this.data.technicianAssessPicture; wx.previewImage({ //当前显示图片 current: technicianAssessPicture[index], //所有图片 urls: technicianAssessPicture }) }, // 长按删除 deleteTechnician: function (e) { var that = this; var technicianAssessPicture = that.data.technicianAssessPicture; var index = e.currentTarget.dataset.index; // 获取当前长按图片下标 wx.showModal({ // cancelColor: 'cancelColor', title: '提示', content: '确定要删除此图片吗？', success: function (res) { if (res.confirm) { console.log('确定'); technicianAssessPicture.splice(index, 1); } else if (res.cancel) { console.log('取消'); return false; } that.setData({ technicianAssessPicture }) } }) }, 到此，关于“微信小程序怎样制作上传图片功能，并可多选、查看和删除”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
