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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。