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

说明

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

文章图片

如何获取代码

文章图片

ctrl + c / ctrl +v
注意：

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

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

【微信小程序云开发上传图片】代码展示

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

// 上传图片 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 = filePathwx.navigateTo({ url: '../storageConsole/storageConsole' }) }, fail: e => { console.error('[上传文件] 失败：', e) wx.showToast({ icon: 'none', title: '上传失败', }) }, complete: () => { wx.hideLoading() } })}, fail: e => { console.error(e) } }) },