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

说明

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

如何获取代码

微信小程序 云开发 上传图片_第2张图片
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)
      }
    })
  },

你可能感兴趣的:(微信小程序)