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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序上传多图到服务器并获取返回的路径，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5266字，纯文字阅读大概需要8分钟。

内容图文

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

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

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

内容总结

以上是互联网集市为您收集整理的微信小程序上传多图到服务器并获取返回的路径全部内容，希望文章能够帮你解决微信小程序上传多图到服务器并获取返回的路径所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/332030.html

来源：【匿名】