微信小程序云开发上传多张图片 9宫格

直接看录屏（有语音说明）

微信小程序开发

如果播放失败请点击此处跳转腾讯视频

show me the code

<view class="img-view"><view class="show" wx:for="{{ imgOne }}" wx:key="_id"><image src="{{ item }}" mode="aspectFill" data-index="{{index}}" bindtap="previewImg"></image><image class="del-img" src="../../images/icons/close.png" data-index="{{index}}" bindtap="reBackImg"></image></view><view class="up" wx:if="{{imgOneSwitch}}" bindtap="onChooseOne">+</view>
</view><button class="onSavebut" bindtap="onSave">发布</button>

/* 上传图片 */
.img-view {width: 710rpx;margin: 20rpx 20rpx;/* background-color: red; */display: flex;flex-direction: row;flex-wrap: wrap;
}.img-view .up, .img-view .show {margin: 6rpx;
}.img-view .up {height: 220rpx;width: 220rpx;background-color: #ededed;line-height: 200rpx;text-align: center;font-size: 100rpx;color: #bfbfbf;
}.img-view .show {width: 220rpx;height: 220rpx;/* background-color: red; */position: relative;
}.del-img {position: absolute;top: 0rpx;right: 0rpx;box-sizing: border-box;padding: 8rpx;background-color: #fff;border-bottom-left-radius: 10rpx;height: 50rpx !important;width: 50rpx !important;z-index: 9998;
}.img-view .show image {width: 100%;height: 100%;
}.onSavebut {width: 300rpx;color: #fff;background-color: #07C160;
}

Page({data: {imgOneSwitch: true,imgOne: [],MAXCOUNTIMAGE: 9,},onLoad: function (options) {},// 保存到 存储 & 数据库onSave: function () {if (this.data.imgOne.length == 0) {wx.showToast({title: '请添加图片',icon: 'none'})return}console.log('通过 ---空--- 校验')wx.showToast({title: '上传图片中',icon: 'loading',duration: 30000,mask: true})this.OnUpImg()},OnUpImg: function () {let promiseArr = []let fileIds = []     // 将图片的fileId存放到一个数组中let imgLength = this.data.imgOne.length;// 图片上传for (let i = 0; i < imgLength; i++) {let p = new Promise((resolve, reject) => {let item = this.data.imgOne[i]let suffix = /\.\w+$/.exec(item)[0]wx.cloud.uploadFile({    cloudPath: 'testdir/' + Date.now() + '-' + Math.random() * 1000000 + suffix, filePath: item,success: (res) => {console.log(res);// console.log(res.fileID)fileIds = fileIds.concat(res.fileID)       // 拼接resolve()},fail: (err) => {console.error(err)reject()}})})promiseArr.push(p)}Promise.all(promiseArr).then((res) => {this.addtoDB(fileIds)}).catch((err) => {console.error(err)       // 上传图片失败wx.showToast({title: '上传失败 请再次点击发布',icon: 'none',duration: 3000})})},addtoDB: function (fileIds) {wx.showToast({title: '发布中...',})},// 选择图片 + 回显onChooseOne: function () {let that = thiswx.chooseImage({count: this.data.MAXCOUNTIMAGE - this.data.imgOne.length,// sizeType: ['compressed','original'],sourceType: ['album', 'camera'],sizeType: ['compressed'],// sourceType: ['album'],success(res) {console.log(res)let tempArr = that.data.imgOne.concat(res.tempFilePaths)that.setData({'imgOne': tempArr})if (that.data.imgOne.length >= that.data.MAXCOUNTIMAGE) {that.setData({imgOneSwitch: false})}}})},// 删除图片功能reBackImg: function (e) {let dataset = e.currentTarget.datasetlet index = dataset.indexconsole.log(index)let arr = this.data.imgOnearr.splice(index, 1)if (arr.length < this.data.MAXCOUNTIMAGE && this.data.imgOneSwitch === false) {this.setData({imgOneSwitch: true})}this.setData({imgOne: arr})},// 预览图片previewImg: function (e) {console.log('放大图片')let index = e.currentTarget.dataset.indexlet item = this.data.imgOne[index]console.log(item)wx.previewImage({current: item, // 当前显示图片的http链接urls: this.data.imgOne // 需要预览的图片http链接列表})},})

注意要在云开发控制台 -> 云存储新建 testdir 文件夹

喜欢或对你有帮助，请点个赞吧。

有错误或者疑问还请评论指出。

我的个人网站 --> 点击访问。

END

微信小程序云开发上传多张图片 9宫格相关推荐

微信小程序-云开发上传文件、图片
文章目录一.前言二.功能简介 1.选择微信聊天记录中的文件 2.选择本地相册/拍照图片 3.上传功能三.实现代码 1.选择聊天文件函数(js) 2.选择相册函数(js) 3.上传文件函数(js) ...
微信小程序云开发上传数据到云数据库
实现功能:实现对数组数据的动态更改,并能通过for循环,上传一整组数据到云数据库代码: 1.wxml代码 <view ><view>运动症状</view> < ...
小程序云开发上传及使用图片
推荐一个不错的学习资料库小程序云开发上传及使用图片 .wxml <view class="img-view"><view class="show&qu ...
微信小程序上传多张图片到服务器,怎么在微信小程序中同时上传多张图片
怎么在微信小程序中同时上传多张图片发布时间:2021-04-16 18:05:52 来源:亿速云阅读:99 作者:Leah 今天就跟大家聊聊有关怎么在微信小程序中同时上传多张图片,可能很多人都不太 ...
微信小程序云开发之模糊搜索
以前在做前后端分离的项目时,要实现一些搜索框的模糊搜索时,运气好一点,后端攻城狮会处理好逻辑,前端只需在输入框的value值发生变化时去调用接口重新渲染数据就好了.运气差点,后端攻城狮只会给你一个总的 ...
微信小程序云开发如何实现上传视频以及图片
微信小程序云开发如何实现上传视频以及图片最基础的数据库增删改查,上传到云存储即可实现,附源码 wxml文件 <button bindtap="upload">上传 ...
mysql导入微信小程序云开发_微信小程序-云开发数据库上传json文件
小程序新增了云开发功能,对于个人开发者是个利好消息.可以省去购买服务器,购买域名以及繁琐配置等步骤,减轻了开发者的负担.至于如何云开发我就不在这里赘述了,请移步微信小程序云开发官方文档,说的很清楚.这 ...
微信小程序云开发实现上传文件和预览下载文件
微信小程序云开发实现上传文件和预览下载文件一.前言目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的p ...
微信小程序云开发---vant组件 van-uploader 实现视频文件上传到云存储，发动态功能
pages/upVideo.wxml //获取用户的头像和昵称展示 <view class="headerBox"><image src="{{user ...

微信小程序云开发上传多张图片 9宫格

直接看录屏（有语音说明）

show me the code

喜欢或对你有帮助，请点个赞吧。

有错误或者疑问还请评论指出。

我的个人网站 --> 点击访问。

END

微信小程序云开发上传多张图片 9宫格相关推荐

最新文章

热门文章

微信小程序 云开发 上传多张图片 9宫格

直接看录屏（有语音说明）

show me the code

喜欢或对你有帮助，请点个赞吧 。

有错误或者疑问还请评论指出。

我的个人网站 --> 点击访问 。

END

微信小程序 云开发 上传多张图片 9宫格相关推荐

最新文章

热门文章

微信小程序云开发上传多张图片 9宫格

喜欢或对你有帮助，请点个赞吧。

我的个人网站 --> 点击访问。

微信小程序云开发上传多张图片 9宫格相关推荐