//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;}
//jsPage({data: {img_arr: [], //储存照片的数组},//https://developers./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./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 = `/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)}}})})},
