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


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中this关键字使用方法详解
Mar 08 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
JS实现基本的网页计算器功能示例
Jan 16 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中上传文件的处理问题
2016/05/29 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
关于Django外键赋值问题详解
2017/08/13 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
python flask安装和命令详解
2019/04/02 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
Python中的self用法详解
2019/08/06 Python
Python shelve模块实现解析
2019/08/28 Python
Python 列表的清空方式
2020/01/13 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
nohup的用法
2014/08/10 面试题
我们的节日清明节活动总结
2014/04/30 职场文书
个园导游词
2015/02/04 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏
python计算列表元素与乘积详情
2022/08/05 Python