蝙蝠岛资源网 Design By www.hbtsch.com
微信小程序上传图片很简单:
//点击选择图片 chooseimage:function(){ var that = this; wx.chooseImage({ count: 9, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function(res) { that.setData({ tempFilePaths: that.data.tempFilePaths.concat(res.tempFilePaths)//在已有的基础上进行拼接 }) } }) },
这里的setData里面是当你选择照片之后,再一次出发函数时候,会在原有的基础上增加照片,而不是覆盖掉,有兴趣可以看一下concat的含义
这里就选择了照片,可以显示在界面上
<image class="icon-image" background-size="contain" wx:for="{{tempFilePaths}}" src='{{item}}' data-id='{{index}}' bindtap='delete'></image>
效果图:
然后是多图上传的过程,这里我上传到公司oss里面,源码:
upload:function(){ for (var i = 0; i < this.data.tempFilePaths.length; i++) { // console.log("000") this.upload_file(this.data.tempFilePaths[i]) } }, upload_file: function (filepath) { var that = this; wx.uploadFile({ url: 'https://***********************/imgs', header: { 'content-type': 'multipart/form-data' }, filePath: filepath, name: 'file', formData: { file: filepath }, success:function(res){ that.setData({ mes:JSON.parse(res.data), images: that.data.images.concat(JSON.parse(res.data).data.filePath)//把字符串解析成对象 }) // console.log(that.data.mes.data.filePath) // console.log(that.data.images.length + "**********") // wx.showToast({ // title: 'success', // }) }, fail: function (res) { wx.showToast({ title: '图片加载失败', }) } }) }
其实到这里都没有太大的问题。
但是当我点击提交的时候,就会出现图片为空的问题,这是因为,我们在提交的事件中肯定是先写上传图片的方法,
让后是提交的方法,但是由于微信小程序是异步,在for循环没有执行完就触发了提交的事件,这造成图片为空的问题。
我搜了很多答案出来,但是由于是接触不久,完全没看懂,什么Promis之类的,只能自己想办法,就在选择图片的时候就把图片上传了,然后返回路径:
//点击选择图片 chooseimage:function(){ var that = this; wx.chooseImage({ count: 9, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function(res) { that.setData({ tempFilePaths: that.data.tempFilePaths.concat(res.tempFilePaths)//在已有的基础上进行拼接 }) that.upload(); that.setData({ temp: that.data.tempFilePaths.length//用来解决 for 循环比 异步 快 }) } }) },
upload:function(){ for (var i = this.data.temp; i < this.data.tempFilePaths.length; i++) { // console.log("000") this.upload_file(this.data.tempFilePaths[i]) } },
你会发现我加了一个temp,这样就会解决问题,可以实现上传,但是删除的时候需要把上传的也删除掉,而不是单单的吧集合里面的删除掉。
源码:
// pages/comment/cmment.js const app = getApp() Page({ /** * 页面的初始数据 */ data: { mes:{}, content:'', tempFilePaths:[], userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), images:[], temp:0, infoId:'', sendtype:'' }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log(options.infoId+"infoID") this.setData({ infoId: options.infoId, sendtype: options.sendtype }) }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, confirmSubmit:function(e){ console.log(e.detail.value) }, //点击选择图片 chooseimage:function(){ var that = this; wx.chooseImage({ count: 9, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function(res) { that.setData({ tempFilePaths: that.data.tempFilePaths.concat(res.tempFilePaths)//在已有的基础上进行拼接 }) that.upload(); that.setData({ temp: that.data.tempFilePaths.length//用来解决 for 循环比 异步 快 }) } }) }, //点击删除图片 delete: function (e){ var index = e.currentTarget.dataset.id; this.data.tempFilePaths.splice(index,1) //渲染数据 this.setData({ tempFilePaths: this.data.tempFilePaths }) }, //提交评论 formBindsubmit: function (e) { // console.log(this.data.images.length + "*****"); // for (var i = 0; i < this.data.images.length; i++){ // console.log(this.data.images[i]); // } console.log(this.data.infoId + "infoID不能用?") wx.request({ url: 'https://*******/saveComments', method: 'POST', header: { 'content-type': 'application/json', 'user-token': 'OXJ*****',//usertoken }, data: { relevantId: this.data.infoId, type: 1,//this.data.type, content:e.detail.value.content, images:this.data.images, }, success: function (res) { if (res.statusCode = 200) { wx.showModal({ title: '提示', content: '评论成功', }) return; } else { wx.showModal({ title: '提示', content: '评论失败', }) } } }) // wx.navigateTo({ // url: '../article/article"000") this.upload_file(this.data.tempFilePaths[i]) } }, upload_file: function (filepath) { var that = this; wx.uploadFile({ url: 'https://********/fileupload/uploader/imgs', header: { 'content-type': 'multipart/form-data' }, filePath: filepath, name: 'file', formData: { file: filepath }, success:function(res){ that.setData({ mes:JSON.parse(res.data), images: that.data.images.concat(JSON.parse(res.data).data.filePath)//把字符串解析成对象 }) // console.log(that.data.mes.data.filePath) // console.log(that.data.images.length + "**********") // wx.showToast({ // title: 'success', // }) }, fail: function (res) { wx.showToast({ title: '图片加载失败', }) } }) } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无微信小程序上传多图到服务器并获取返回的路径的评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年12月28日
2024年12月28日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]