学而时习之微信小程序1.2

  • 小程序uploader组件
  • 小程序uploader api
  • 云开发Cloud.uploadFile
  • 项目代码
  • end


小程序uploader组件

小程序uploader api

官方API：uploader 文档很详细，按照步骤来，配置好后台服务器，单图或多图上传都在后台处理，后台返回服务器上的图片给前端显示即可。

云开发Cloud.uploadFile

因为初学小程序，也想更多了解微信生态。所以选择云开发。上传文件也采用云开发上的文件存储。
官方API：云开发Cloud.uploadFile。
官方小程序模板里面给了个单图上传的demo，但有时会碰到多图上传的情况。然后这一次找遍了，没找到一次性上传多个文件的官方接口。
多图上传在目前应用市场上也算刚需，搞微信开发不可能没有遇到过，云开发出来也有一段时间了，摸石头过河也会民间的解决办法。
于是google了一番，多数文章使用遍历图片路径上传，最后使用的还是官方单图上传接口，只是图片二进制还是转base64的区别。
看来不管是巧妇还是笨蛋都难为无米之炊，在这里只希望微信云开发尽快推出多图上传接口，跟真正的后台服务器看齐。

项目代码

官方提供的上传组件一般需求应该够用了吧，提供的API也很详细。
uploader组件官方地址 wxml，json按官方方式引入即可。
js文件贴一下上传接口。

uplaodFile(files) {
    console.log('upload files', files)
    // 文件上传的函数，返回一个promise
    return new Promise((resolve, reject) => {
      const tempFilePaths = files.tempFilePaths;
      //上传返回值
      const that = this;
      const object = {};
      for (var i = 0; i < tempFilePaths.length; i++) {
        let filePath = '',cloudPath = ''
        filePath = tempFilePaths[i]
        // 上传图片
        // cloudPath 最好按时间 遍历的index来排序，避免文件名重复
        cloudPath = 'blog-title-image-' + new Date().getTime() + '-' + i + filePath.match(/\.[^.]+?$/)[0]

        console.log(filePath)
        console.log(cloudPath)
        const upload_task = wx.cloud.uploadFile({
          filePath, 
          cloudPath, 、
          success: function(res) {
            console.log(res)
            // 可能会有好几个200+的返回码，表示成功
            if (res.statusCode === 200  || res.statusCode === 204 || res.statusCode === 205) {
              const url = res.fileID
              that.data.files.push(url)
              if (that.data.files.length === tempFilePaths.length) {
                object.urls = that.data.files;
                resolve(object)  //这就是判断是不是最后一张已经上传了，用来返回，
              }
            } else {
              reject('error')
            }
          },
          fail: function(err) {
            console.log(err)
          }, 
          conplete: () => {
            
          }
        })
      }
    })
  },

tip：
(1)cloudPath最好按时间 遍历的index来排序，避免文件名重复
(2)可能会有200，204等返回码，都表示成功状态

end