博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
快速高效实现微信小程序图片上传与腾讯免费5G存储空间的使用
阅读量:6670 次
发布时间:2019-06-25

本文共 1931 字,大约阅读时间需要 6 分钟。

本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率

对于一般的图片上传功能开发,我们一般需要实现如下几个技术点:

  1. 后台服务器的购买;
  2. API 域名的购买与配置;
  3. API 功能的开发;
  4. 图片空间的逻辑处理以及合理管理;
  5. 配置图片 CDN 加速图片加载效率。

而当我们使用腾讯提供的云开发功能时,只需要几行代码即可在微信小程序里实现完整的图片上传逻辑,非常地方便、高效。

2.图片上传的代码实现

使用腾讯云开发实现图片上传的主要业务逻辑如下:

  1. 通过 wx.chooseImage 方法让用户选择设备中的图片资源;
  2. 通过 wx.cloud.uploadFile 方法实现图片的上传,上传至腾讯提供的免费 5G 空间中;
  3. 通过 wx.cloud.uploadFile 的回调事件处理云端返回的图片资源 ID、链接等相关属性,进行后续地处理。

下面我们直接看这三个业务逻辑的代码部分。

/* 图片的选择与上传部分逻辑 */ // 上传图片  doUpload: function () {    // 选择图片    wx.chooseImage({      count: 1,      sizeType: ['compressed'],      sourceType: ['album', 'camera'],      success: function (res) {        wx.showLoading({          title: '上传中',        })        const filePath = res.tempFilePaths[0]                // 上传图片        // 这部分可以自行处理图片的命名方式,这里图片进行了固定命名为 my-image        const cloudPath = 'my-image' + 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)      }    })  },
这部分比较简单,直接在页面读取加载到的图片链接即可
onLoad: function (options) {    const {      fileID,      cloudPath,      imagePath,    } = app.globalData    this.setData({      fileID,      cloudPath,      imagePath,    })  },

后记:图片在云开发管理器中的管理与查看,可以看到图片已成功上传。

转载于:https://www.cnblogs.com/ljx20180807/p/9987803.html

你可能感兴趣的文章
Hibernate问题-read-write缓存策略
查看>>
C/C++语言中“:”的使用方法
查看>>
sql中实现汉字的拼音首字母查询
查看>>
Android 动态布局 (代码布局)
查看>>
MYSQL备份和恢复
查看>>
spark安装:在hadoop YARN上运行spark-shell
查看>>
Docker存储驱动之ZFS简介
查看>>
根据sql,一键生成excle 格式, 再通过 zip包压缩为zip
查看>>
PL/SQL Developer 添加数据
查看>>
PHP实时统计文件下载次数
查看>>
linux eth0 改eth1 在改ip
查看>>
安装pip和json
查看>>
乾颐堂鹏同学通过HCIE送给后来者的话
查看>>
JS中的prototype
查看>>
我的友情链接
查看>>
本体编辑和知识获取软件--protege汉化版
查看>>
C# 利用NPOI来导入Excel表
查看>>
23张非常精美的圣诞桌面壁纸分享
查看>>
稀疏矩阵的压缩存储和转置
查看>>
华为S5700交换机开启WEB配置
查看>>