欢迎光临
我的个人博客网站

实战|如何使用云开发实现照片附件上传开发

云开发是腾讯云提供的云原生一体化开发环境和工具平台,为开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用。

开发流程

代码引入

在当前页面的.json 中引入组件

实战|如何使用云开发实现照片附件上传开发

{   "usingComponents": {     "mp-uploader": "weui-miniprogram/uploader/uploader"   } } 

代码开发

在当前页面.wxml中编写上传组件

实战|如何使用云开发实现照片附件上传开发

<view class="page__bd">      <mp-cells>        <mp-cell>         <mp-uploader bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uplaodFile}}" files="{{files}}" max-count="4" title="附件上传" tips="最多可上传4张照片"></mp-uploader>        </mp-cell>    </mp-cells>    </view> 

bindfail 图片上传失败的事件,detail为{type, errMsg},type为1表示图片超过大小限制,type为2表示选择图片失败,type为3表示图片上传失败。

bindselect 图片选择触发的事件,detail为{tempFilePaths, tempFiles, contents},其中tempFiles和tempFilePaths是chooseImage返回的字段,contents表示所选的图片的二进制Buffer列表

max-count 图片上传的个数限制

在当前页面的.js中编写

实战|如何使用云开发实现照片附件上传开发

wx.cloud.init({   env: '环境ID',   traceUser: true, })  formInputChange(e) {     const {       field     } = e.currentTarget.dataset     this.setData({       [`formData.${field}`]: e.detail.value     })   }, chooseImage: function (e) {     var that = this;     wx.chooseImage({         sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有         sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有         success: function (res) {             // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片             that.setData({                 files: that.data.files.concat(res.tempFilePaths)             });         }     }) }, previewImage: function(e){     wx.previewImage({         current: e.currentTarget.id, // 当前显示图片的http链接         urls: this.data.files // 需要预览的图片http链接列表     }) }, selectFile(files) {     console.log('files', files)     // 返回false可以阻止某次文件上传 }, uplaodFile(files) {     console.log('upload files', files)     console.log('upload files', files)     // 文件上传的函数,返回一个promise     return new Promise((resolve, reject) => {       const tempFilePaths = files.tempFilePaths;       //上传返回值       const that = this;       const object = {};       for (var i = 0; i < tempFilePaths.length; i++) {         let filePath = '',cloudPath = ''         filePath = tempFilePaths[i]         // 上传图片         // cloudPath 最好按时间 遍历的index来排序,避免文件名重复         cloudPath = 'blog-title-image-' + new Date().getTime() + '-' + i + filePath.match(/.[^.]+?$/)[0]          console.log(filePath)         console.log(cloudPath)         const upload_task = wx.cloud.uploadFile({           filePath,            cloudPath,            success: function(res) {             console.log(res)             // 可能会有好几个200+的返回码,表示成功             if (res.statusCode === 200  || res.statusCode === 204 || res.statusCode === 205) {               const url = res.fileID               that.data.files.push(url)               if (that.data.files.length === tempFilePaths.length) {                 object.urls = that.data.files;                 resolve(object)  //这就是判断是不是最后一张已经上传了,用来返回,               }             } else {               reject('error')             }           },           fail: function(err) {             console.log(err)           },            conplete: () => {                        }         })       }     })     // 文件上传的函数,返回一个promise }, uploadError(e) {     console.log('upload error', e.detail) }, uploadSuccess(e) {     console.log('upload success', e.detail) } }); 

属性参考文档:https://wechat-miniprogram.github.io/weui/docs/uploader.html

我们关联云开发之后,我们即可将照片上传到数据库中。

实战|如何使用云开发实现照片附件上传开发

为方便管理,我们可以创建CMS内容管理器。

创建CMS内容管理器

  1. 点击云开发->更多->内容管理 进行开通。

    实战|如何使用云开发实现照片附件上传开发

    2.云开发为大家准备了基础版,为大家提供了一定的免费额度。

    设置管理员账号以及密码,温馨提示密码请牢记(如果忘记密码可以再内容管理器页面重置密码),设置完成后耐心等待系统初始化。

    实战|如何使用云开发实现照片附件上传开发

    3.根据页面中提供的访问地址访问页面登陆后,创建新的项目(这里以花园假期为例)

    实战|如何使用云开发实现照片附件上传开发

    4.我们在内容模型中创建照片上传管理(这里模拟情况为仅需要用户上传和记录用户id)

    创建内容模型

    实战|如何使用云开发实现照片附件上传开发

    如果需要用户上传多张照片,在设置照片字段时候需要勾选允许用户上传多张照片!

    实战|如何使用云开发实现照片附件上传开发

    5.用户上传后我们可以再内容集合,相应模型中查看。

    实战|如何使用云开发实现照片附件上传开发

效果展示

实战|如何使用云开发实现照片附件上传开发

本文由博客一文多发平台 OpenWrite 发布!

赞(0) 打赏
未经允许不得转载:张拓的天空 » 实战|如何使用云开发实现照片附件上传开发
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏