小程序多图上传并返回操作

黄良钵

分类: 程序开发 82 4

小程序多图上传并返回操作

之前有写过小程序上传图片的,大多数都是前端处理,这篇是关于上传到服务器接收返回数据操作的,这里使用迭代器防止数据返回异步。

  1. 小程序上传图片及预览图片
  2. 小程序选择、预览、删除、上传图片

js:

  1. /**
  2.   * 上传图片
  3.   */
  4.  upImg: function (e) {
  5.      let that = this
  6.      wx.chooseImage({
  7.          success: function (res) {
  8.              // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  9.              let tempFilePaths = res.tempFilePaths
  10.              // console.log(tempFilePaths)
  11.              let imgs = that.data.imgs  // 这个是储存图片地址,用于显示图片
  12.              let image = that.data.image  // 这个是获取图片名称或者id等后端发送请求需要的数据
  13.              that.uploadImage(0, tempFilePaths)
  14.          }
  15.      })
  16.  },
  17.  /**
  18.   * 图片上传接口
  19.   */
  20.  uploadImage: function (i,filePath){
  21.      if (i == filePath.length){
  22.          return
  23.      }
  24.      let that = this
  25.      let imgs = that.data.imgs
  26.      let image = that.data.image
  27.      wx.uploadFile({
  28.          url: app.globalData.api + '/Uploads/uploader', //仅为示例,非真实的接口地址
  29.          filePath: filePath[i],
  30.          name: 'file',
  31.          success: function (res) {
  32.              let img = JSON.parse(res.data)
  33.              console.log(img)
  34.              if (img.code == 200) {
  35.                  imgs.push(img.data.url_file_name)
  36.                  image.push(img.data.file_name)
  37.                  that.setData({
  38.                      imgs,
  39.                      image
  40.                  })
  41.                  console.log(that.data.imgs)
  42.                  console.log(that.data.image)
  43.                  i++
  44.                  that.uploadImage(i, filePath)
  45.              }
  46.              //do something
  47.          }
  48.      })
  49.  },

 

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
上传图片、小程序、迭代器

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 4 条评论关于 “小程序多图上传并返回操作”

Loading...