微信小程序上传多图到服务器并获取返回的路径
2019-05-05 18:01
716 查看
微信小程序上传图片很简单:
//点击选择图片 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?id= ' + this.data.infoId // }) },upload:function(){ for (var i = this.data.temp; 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://********/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: '图片加载失败', }) } }) } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 微信小程序上传多图到服务器并获取返回的路径
- WebApi接收微信小程序上传的图片(二进制文件流)并保存在服务器指定路径
- 微信小程序-从相册获取图片,视频 使用相机拍照,录像上传+服务器(nodejs版)接收
- 通过Socket方式上传文件后服务器迟迟不返回文件保存路径
- [转]微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
- 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
- Android拍照获取照片路径并上传至服务器+Servlet代码
- SpringMvc的文件上传 和如何获取服务器的真正的文件路径
- 通过微信接口上传图片并获取到自己的服务器
- 微信小程序开发笔记之wx.request()的坑——将服务器返回的数据及时显示到视图层
- 获取微信小程序二维码,返回一堆乱码后,该怎么办?
- 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
- 安卓获取服务器返回的图片资源路径并下载图片
- 微信相关 -- 可以通过调用下面的方法 请求对应的url 获取微信服务器返回的json数据
- 关于java部署ueditor 上传图片路径服务器返回的路径与实际位置不一致的解决
- 微信小程序 从服务器获取数据(十四)
- 微信小程序开发笔记之wx.request()的坑——将服务器返回的数据及时显示到视图层
- 微信小程序wx.request接收服务器返回信息
- 上传图片到服务器系列之----前后台路径获取问题
- 利用 Javascript 实现上传图片并向服务器获取图片路径后显示的 demo