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

原创 黄良钵  2018-07-06 10:59  阅读 83 次 评论 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.  },

 

历史上的今天:

关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

  1. TrojanSun
    TrojanSun 【VIP 1】来自天朝的朋友 谷歌浏览器 Windows 7 中国 · 北京 · 北京 · 联通 @回复

    大佬更新好频繁,支持;!

    • 黄良钵
      黄良钵【站长】2018-07-06 at 16:24来自天朝的朋友 谷歌浏览器 Linux 中国 · 江苏 · 南京 · 电信  回复

      @TrojanSun最近做项目碰到的问题,解决了就顺便写出来记录下;还有就是网站最近也动了下,有时候半个月都没一篇文章 [害羞]

      • TrojanSun
        TrojanSun 【VIP 1】2018-07-06 at 16:25来自天朝的朋友 谷歌浏览器 Windows 7 中国 · 北京 · 北京 · 联通  回复

        @黄良钵很强了,我遇到的问题都没写,也浪费好久了。

        • 黄良钵
          黄良钵【站长】2018-07-06 at 16:26来自天朝的朋友 谷歌浏览器 Linux 中国 · 江苏 · 南京 · 电信  回复

          @TrojanSun博客嘛,就是拿来记录的,有时候忘了,回来搜下