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

    技术2022-07-11  106

    说明

    在微信小程序里面,在我们初始化好程序的那一刻,微信已经自动生成了一个页面就是 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) } }) },
    Processed: 0.015, SQL: 9