微信小程序上传图片(预览删除限制图片大小、张数)

//wxml<button class='button' bingtap="uploadSomeMsg">上传</button>    <view class="uploadImgBox"><view class='smallImgBox'><block wx:for="{{img_arr}}" wx:key="index"><view class='logoinfo'><image class='logoinfo' mode="aspectFill" src='{{item}}' data-index="{{index}}" bindtap="previewImg"bindlongpress="deleteImg" name="headimage" ></image></view></block><image bindtap='getLocalityImg' class='moreImg' src="../../images/uploadPictures.png"></image></view><view></view> </view>

//wxss
.uploadImgBox {margin: 30rpx 0;
}.logoinfo {height: 180rpx;width: 180rpx;margin: 10rpx ;
}.smallImgBox {display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(2,180rpx);grid-gap:20rpx 10rpx;
}.moreImg {border-radius: 10rpx;height: 180rpx;width: 180rpx;margin: 20rpx ;
}.button{  height: 90rpx;  width: 270rpx;  font-size: 38rpx;  background-color: rgba(146, 163, 45, 0.288);  font-weight: 600;  color: white;} button::after {border: none;
}

//js
Page({data: {img_arr: [], //储存照片的数组},//https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html  微信小程序上传文件api//上传图片到服务器 uploadSomeMsg() {var that = thisvar adds = that.data.img_arr;for (let i = 0; i < this.data.img_arr.length; i += 1) {wx.uploadFile({url:'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址filePath: that.data.img_arr[i],name: 'content',formData: {'user': adds},success: function (res) {console.log(res, "上传图片啦")if (res) {wx.showToast({title: '已提交发布！',duration: 3000});}}})}},//从本地获取照片 getLocalityImg() {let that = this;if (this.data.img_arr.length < 5) {wx.chooseImage({count: 5 - that.data.img_arr.length, //上传图片的数量 当之前上传了部分图片时 ,总数 - 已上传数 = 剩余数   (限制上传的数量)sizeType: ['original', 'compressed'],  //可以指定原图或压缩图,默认二者都有sourceType: ['album', 'camera'],        //指定图片来源是相机还是相册,默认二者都有success(res) {console.log(res, "---------上传的图片")const tempFiles = res.tempFiles //包含图片大小的数组let answer = tempFiles.every(item => {   //限制上传图片大小为2M,所有图片少于2M才能上传return item.size <= 2000000})if (answer) {that.setData({img_arr: that.data.img_arr.concat(res.tempFilePaths),})}else{wx.showToast({title:'上传图片不能大于2M!',icon:'none'    })}}})} else {wx.showToast({  //超过图片张数限制提示title: '最多上传五张图片',icon: 'none',duration: 2000})}},//删除照片功能与预览照片功能 deleteImg(e) {let that = this;let img_arr = that.data.img_arr;let index = e.currentTarget.dataset.index;  //获取长按删除图片的indexwx.showModal({title: '提示',content: '确定要删除此图片吗？',success(res) {if (res.confirm) {// console.log('点击确定了');img_arr.splice(index, 1);} else if (res.cancel) {// console.log('点击取消了');return false;}that.setData({img_arr: img_arr});}})},//预览图片previewImg(e) {let index = e.currentTarget.dataset.index;let img_arr = this.data.img_arr;wx.previewImage({current: img_arr[index],urls: img_arr})},})

#转换成base64格式

//1__转换本地上传图片//如果需要上传base64格式图片到后端,可以在上传图片时可以这样转换,其它的和普通接口上传数据一样//转换结果let data=wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], "base64")
//`data:image/png;base64,${data}`
//上传时只需要在转换结果前加一个: `data:image/png;base64,${data}`   ,就是完整的图片数据啦//2__转换服务器网络图片为base64images.forEach(url => {let newUrl = `https://dx.showweb.net/upload${url}` //需拼上前缀才能下载网络图片this.imageToBase(newUrl).then((res)=>{this.data.img_arr.push(res)this.setData({img_arr:this.data.img_arr})})})imageToBase(img) {return new Promise((resolve, reject)=>{wx.downloadFile({ //先下载图片url: img,success(res) {if (res.statusCode === 200) {wx.playVoice({filePath: res.tempFilePath //选择图片返回的相对路径})resolve(res.tempFilePath)}}})})},

微信小程序上传图片(预览删除限制图片大小、张数)相关推荐

微信小程序上传图片预览删除
微信小程序上传图片预览删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...
uni-app移动端-H5-微信小程序在线预览pdf，图片，视频
封装了一个插件,可直接导入hbuilderx查看使用: 插件地址:uni-app移动端-H5-微信小程序在线预览pdf,图片,视频 <template><view class=&qu ...
微信小程序打开预览下载的文件
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 使用 wx.openDocument(obj) 方法预览 wx.downloadFile({url: 'htt ...
微信小程序九宫格预览+单张图片预览
我们废话不多说直接上效果图下面是代码  <image style="width:550rpx; height: 600rpx;" sr ...
记录一次微信小程序实现预览pdf
微信小程序预览pdf需要注意的是,在安卓端和ios端是有差异的. 安卓端不能用web-view直接打开,需要先下载到本地,再打开文件进行预览. 网上说的ios端可以直接用web-view进行预览,但是 ...
unicloud开发微信小程序调试预览、体验版无法获取数据
unicloud开发微信小程序使用的云空间是阿里的.使用腾讯自家的配置上简单些,但开始收费了.使用阿里的云空间需要在小程序平台配置域名白名单.问题出在,我已经配置了阿里云空间的域名,在使用体验版小程序 ...
uniapp微信小程序老预览失败，或者上传失败（已解决）
uniapp微信小程序提示报错老是提示超过了2M 但是我改完之后还是提示超过2M的错误 message:Error: 系统错误,错误码:80058,preloadRule [pages/index ...
微信小程序上传图片时校验所选图片是否为身份证图片
在小程序的开发中,有时需求会有上传身份证照片,一般如果没有特殊要求的话,这块可以直接调微信小程序提供的API来实现,但是如果在上传图片的同时还要求校验图片是否为身份证照片时,这就需要做一些处理了.小程 ...
微信小程序手机预览请求不到数据？
本地开发调试小程序时,用手机预览需要有如下设置: 1.微信开发者工具中,本地设置:不校验安全域名.web-view 域名.TLS 版本以及 HTTPS 证书.这样在有网络请求的时候,就可以访问本地的服 ...
微信小程序H5预览页面框架
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content= ...

微信小程序上传图片(预览删除限制图片大小、张数)

微信小程序上传图片(预览删除限制图片大小、张数)相关推荐

最新文章

热门文章

微信小程序上传图片(预览 删除 限制图片大小、张数)

微信小程序上传图片(预览 删除 限制图片大小、张数)相关推荐

最新文章

热门文章

微信小程序上传图片(预览删除限制图片大小、张数)

微信小程序上传图片(预览删除限制图片大小、张数)相关推荐