小程序中多图片上传

前言:
由于小程序中 wx.uploadFile 的方法是异步上传,不符合我们的需求,它自身目前暂时不支持同步上传,所以需要我们手动处理 。因为通常我们在上传图片时,可能是多张图片上传,将图片上传后还需要同字段数据再一起保存,所以需要同步来保存处理 。通俗易懂来讲就是:先图片上传返回图片集合数据,再执行下一步保存,总之图片上传的动作和下一步保存的动作不能出现顺序错误 。先图片再下一步数据一同保存,这理解为同步处理,如果顺序不对,则理解为异步 。
小程序page端:
<text class="word-class" style="font-size: 28rpx;">添加图片:</text><!--以下为图片选择--><view class="img_box"><view class="imgs" wx:for="{{tempFilePaths}}" wx:key="index"><image src=https://www.isolves.com/it/cxkf/ydd/xcx/2023-02-03/'{{item}}' bindlongpress="DeleteImg" bindtap="PreviewImg" data-index="{{index}}" mode='widthFix' />小程序css端
/* 选择图片 */.img_box{width:690rpx;position:relative;display: flex;flex-wrap: wrap;margin:0 auto;padding-top: 20px;}.imgs{width:33.33333333%;display: flex;justify-content: center;margin-bottom:20rpx;}.imgs image{width:90%;max-height:212rpx;border:1px solid rgba(214, 212, 212, 0.1);}.imgs .images{position:relative;}.images button{width:100%;height:100%;position:absolute;top:0;left:0;}.img_box .images{width:90%;height: 212rpx;border:1px solid #E8E8E8;border-radius:4rpx;display: flex;align-items: center;justify-content: center;}.img_box .images>image{width:60rpx;height:60rpx;}小程序JS端:
let App = getApp();// 工具类let util = require('../../util/util')// 接口地址let api = require('../../config/api.js')// 当前js的工具类let custom = require('../../util/custom')Page({data: {tempFilePaths: [],temp: [], // 多图片缓存区},ChooseImg() {let that = this;wx.chooseImage({count: 9, // 默认最多9张图片,可自行更改sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有success: res => {wx.showToast({title: '正在添加...',icon: 'loading',mask: true,duration: 1000})let fullName = res.tempFilePaths + "";let last = fullName.lastIndexOf(".");let suffix = fullName.substring(last + 1, fullName.length);// 只有图片才可以上传if (suffix == 'jpg' || suffix == 'png' || suffix == 'jpeg' || suffix == 'bmp') {that.data.temp.push(res.tempFilePaths + "");} else {wx.showModal({title: '提示',content: '图片上传错误',success: function (res) {if (res.confirm) {console.log('用户点击确定')} else {console.log('用户点击取消')}}});}let imgs = that.data.temp;that.setData({tempFilePaths: imgs})console.log(that.data.tempFilePaths)}})},//预览图片PreviewImg: function (e) {let index = e.target.dataset.index;let that = this;wx.previewImage({current: that.data.tempFilePaths[index],urls: that.data.tempFilePaths,})},//长按删除图片DeleteImg: function (e) {var that = this;var tempFilePaths = that.data.tempFilePaths;let temp = that.data.temp;var index = e.currentTarget.dataset.index;//获取当前长按图片下标wx.showModal({title: '提示',content: '确定要删除此图片吗?',success: function (res) {if (res.confirm) {//console.log('点击确定了');tempFilePaths.splice(index, 1);temp.splice(index, 1);} else if (res.cancel) {//console.log('点击取消了');return false;}that.setData({tempFilePaths});}})},onLoad: function (options) {},onReady: function () {},cancelWork() {wx.navigateBack();},async saveWrok() {let that = this;var tempFilePaths = that.data.tempFilePaths;// 同步等待await custom.uploadImage(tempFilePaths).then(res => {return Promise.resolve(res)}).then(res => {// 同步等待返回的图片地址集合let files = res;let param = {fild1:xxx, // 字段1filed2:xxx, // 字段2files: files, // 图片地址集合}// 将图片地址和字段一起保存util.http('https://xxx.cn/save', param,'GET').then(function (res) {if (res.code == 0) {// 判断图片// console.log("size:" + that.data.files.length)if (that.data.tempFilePaths.length < 1) {that.data.temp = [];that.data.tempFilePaths = [];wx.showModal({title: '提示',content: '图片上传错误',success: function (res) {if (res.confirm) {console.log('用户点击确定')} else {console.log('用户点击取消')}}});that.setData({tempFilePaths: [],temp: [],});return false;}util.showToast(res.data)wx.navigateBack();}});});},onShow: function () {// 页面显示},onHide: function () {// 页面隐藏},onUnload: function () {// 页面关闭},})


推荐阅读