微信小程序 云开发 上传图片

说明

• 在微信小程序里面，在我们初始化好程序的那一刻，微信已经自动生成了一个页面
• 就是 index 页面，这里面有一个 上传图片功能（已经写得很完整了），直接拿过来使用就可以了
• 代码展示在下面 ------------- 点击直达
• 官方文档说明地址
  

如何获取代码

ctrl + c / ctrl +v

注意：

const cloudPath = 'my-image' + Date.now() + filePath.match(/\.[^.]+?$/)[0]   //上传图片的名字

自带的只是上传一张图片，因为名字是一样的，所以会覆盖，Date.now() 是我加的，这样就根据事件来书写不同的名字，不会覆盖

代码展示

• 直接写在对应页面的 js文件中 page{} 里面即可
• upload 是事件函数，我自己定义的，你定义的点击的事件名字是啥你就写啥

<button bindtap="doUpload">上传图片</button>

  // 上传图片
  doUpload: function () {
    // 选择图片
    wx.chooseImage({
      count: 1,            //选择一张图片
      sizeType: ['compressed'],   //压缩图
      sourceType: ['album', 'camera'],    //相册或拍照
      success: function (res) {

        wx.showLoading({
          title: '上传中',
        })

        const filePath = res.tempFilePaths[0]

        // 上传图片
        const cloudPath = 'my-image' + Date.now() + filePath.match(/\.[^.]+?$/)[0]   //上传图片的名字
        wx.cloud.uploadFile({    //将图片上传到云服务器的云存储中
          cloudPath, //云存储的路径
          filePath,  //本地图片路径
          success: res => {
            console.log('[上传文件] 成功：', res)

            app.globalData.fileID = res.fileID
            app.globalData.cloudPath = cloudPath
            app.globalData.imagePath = filePath

            wx.navigateTo({
              url: '../storageConsole/storageConsole'
            })
          },
          fail: e => {
            console.error('[上传文件] 失败：', e)
            wx.showToast({
              icon: 'none',
              title: '上传失败',
            })
          },
          complete: () => {
            wx.hideLoading()
          }
        })

      },
      fail: e => {
        console.error(e)
      }
    })
  },