小程序
小游戏
企业微信
微信支付
扫描小程序码分享
多图上传,在相册按照顺序选择后并不按照顺序显示
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
<view class="weui-grids"> <block wx:for="{{files}}" wx:key="*this"> <view class="weui-grid"> <image class="weui-grid__icon" src="{{item}}" mode="aspectFill" /> <image class="delpic" src="/images/del.png" data-num="{{index}}" bindtap="delpic"></image> </view> </block> </view> data: { count: 9, images: [], images_url: [], files: [], }, //上传图片 chooseImg: function (e) { var that = this; if (that.data.count > 0) { wx.chooseImage({ count: that.data.count, sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var files = that.data.files.concat(res.tempFilePaths) that.setData({ files: that.data.files.concat(res.tempFilePaths), images: [], images_url: [] }); that.uploadImage(files, 0) wx.showToast({ title: '正在上传...', icon: 'loading', mask: true, duration: 10000 }) } }) } else { wx.showToast({ title: '最多上传9张图片', icon: 'none', mask: true, duration: 2000 }) } }, uploadImage: function (files, i) { var i var that = this wx.uploadFile({ url: app.globalData.apiUrl + 'upload', filePath: files[i], name: 'img', success(res) { var images_url = that.data.images_url var images = that.data.images var picdata = JSON.parse(res.data); images_url.push(picdata.data.img_url); images.push(picdata.data.img); var count = images_url.length; that.setData({ count: 9 - count, images: images, images_url: images_url }); i++ if (i < files.length) { that.uploadImage(files, i) } else { wx.hideToast(); } }, fail: function (res) { wx.hideToast(); wx.showModal({ title: '错误提示', content: '上传图片失败', showCancel: false, success: function (res) {} }) } }) },
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
异步处理,肯定不会按照顺序(欢迎私信交流),多图上传参考例子:https://blog.songdonghong.com/2020/03/18/wxxcxplsc/
写个代码片段 把这几张图放进去看下。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
<view class="weui-grids"> <block wx:for="{{files}}" wx:key="*this"> <view class="weui-grid"> <image class="weui-grid__icon" src="{{item}}" mode="aspectFill" /> <image class="delpic" src="/images/del.png" data-num="{{index}}" bindtap="delpic"></image> </view> </block> </view> data: { count: 9, images: [], images_url: [], files: [], }, //上传图片 chooseImg: function (e) { var that = this; if (that.data.count > 0) { wx.chooseImage({ count: that.data.count, sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var files = that.data.files.concat(res.tempFilePaths) that.setData({ files: that.data.files.concat(res.tempFilePaths), images: [], images_url: [] }); that.uploadImage(files, 0) wx.showToast({ title: '正在上传...', icon: 'loading', mask: true, duration: 10000 }) } }) } else { wx.showToast({ title: '最多上传9张图片', icon: 'none', mask: true, duration: 2000 }) } }, uploadImage: function (files, i) { var i var that = this wx.uploadFile({ url: app.globalData.apiUrl + 'upload', filePath: files[i], name: 'img', success(res) { var images_url = that.data.images_url var images = that.data.images var picdata = JSON.parse(res.data); images_url.push(picdata.data.img_url); images.push(picdata.data.img); var count = images_url.length; that.setData({ count: 9 - count, images: images, images_url: images_url }); i++ if (i < files.length) { that.uploadImage(files, i) } else { wx.hideToast(); } }, fail: function (res) { wx.hideToast(); wx.showModal({ title: '错误提示', content: '上传图片失败', showCancel: false, success: function (res) {} }) } }) },
异步处理,肯定不会按照顺序(欢迎私信交流),多图上传参考例子:https://blog.songdonghong.com/2020/03/18/wxxcxplsc/
写个代码片段 把这几张图放进去看下。