微信小程序实现上传图片小功能
作者:花笙_
这篇文章主要为大家详细介绍了微信小程序实现上传图片小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现上传图片的具体代码,供大家参考,具体内容如下
用到的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 }) } }) },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。