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


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 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
网页图片延时加载的js代码
Apr 22 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 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中OO之静态关键字以及类常量的详解
2013/06/07 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
详细介绍Ruby中的正则表达式
2015/04/10 Python
python中list常用操作实例详解
2015/06/03 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
django解决订单并发问题【推荐】
2019/07/31 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
python爬虫搭配起Bilibili唧唧的流程分析
2020/12/01 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
大一期末自我鉴定
2013/12/13 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
服装设计专业求职信
2014/06/16 职场文书
关于环保的活动方案
2014/08/25 职场文书
大学生个人学习总结
2015/02/15 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
高一作文之暖冬
2019/11/09 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js