微信小程序上传多图到服务器并获取返回的路径


Posted in Javascript onMay 05, 2019

微信小程序上传图片很简单:

//点击选择图片
 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: '图片加载失败',
  })
 }
 })
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 Javascript
详解Vue的ref特性的使用
Jan 24 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 #Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 #Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 #Javascript
小程序关于请求同步的总结
May 05 #Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 #Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 #Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 #Javascript
You might like
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
php实现分页工具类分享
2014/01/09 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
用Python写冒泡排序代码
2016/04/12 Python
python模块之re正则表达式详解
2017/02/03 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
浅谈django orm 优化
2018/08/18 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
python 连续不等式语法糖实例
2020/04/15 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
python Tornado框架的使用示例
2020/10/19 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
Linux文件系统类型
2012/09/16 面试题
母亲80寿诞答谢词
2014/01/16 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
毕业生个人自荐书
2015/03/05 职场文书
安全第一课观后感
2015/06/18 职场文书