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


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 相关文章推荐
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 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
收音机的保养
2021/03/01 无线电
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
使用PHP维护文件系统
2006/10/09 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
Python实现购物车程序
2018/04/16 Python
python爬取淘宝商品销量信息
2018/11/16 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
浅谈django channels 路由误导
2020/05/28 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
连锁经营管理专业大学生求职信
2013/10/30 职场文书
项目专员岗位职责
2013/12/04 职场文书
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
优秀员工获奖感言
2014/03/01 职场文书
如何写好建议书
2014/03/13 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
老龙头导游词
2015/02/11 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS