微信小程序实现上传图片小功能微信小程序实现上传图片小功

【微信小程序实现上传图片小功能】本文实例为大家分享了微信小程序实现上传图片的具体代码，供大家参考，具体内容如下
用到的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

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,// 默认9mediaType: ['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})}})},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。