老规矩，先看效果图本节知识点-云存储

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

老规矩，先看效果图本节知识点-云存储

老规矩，先看效果图

本节知识点

下面详细说明具体的实现步骤。

图片选择和上传

 class='item_root' bindtap='chuantupian'>
  <text>{{zhaopian}}text>
  class='right_arrow' />
 view>

 //上传图片
 chuantupian() {
  let that = this;
  let timestamp = (new Date()).valueOf();
  wx.chooseImage({
   success: chooseResult => {
    wx.showLoading({
     title: '上传中。。。',
    })
    // 将图片上传至云存储空间
    wx.cloud.uploadFile({
     // 指定上传到的云路径
     cloudPath: timestamp + '.png',
     // 指定要上传的文件的小程序临时文件路径
     filePath: chooseResult.tempFilePaths[0],
     // 成功回调
     success: res => {
      console.log('上传成功', res)
      wx.hideLoading()
      wx.showToast({
       title: '上传图片成功',
      })
      if (res.fileID) {
       that.setData({
        zhaopian: '图片如下',
        imgUrl: res.fileID
       })
      }
     },
    })
   },
  })
 },

至此我们就可以真正实现图片选择和上传的功能了。

我们来说一下它是如何实现的。

至此我们就轻松实现了小程序的图片上传功能。 是不是很简单呢？

如果有编程方面的问题可以加我微信（编程开发备注）

会一点编程，一个编码员，而不是著名的全栈开发。 分享一些自己的经历和学习微信小程序开发者网站，希望别人以后少走弯路老规矩，先看效果图本节知识点-云存储，少补坑。

视频讲解地址：

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等