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

2021年11月25日 阅读数:6
这篇文章主要向大家介绍实战|如何使用云开发实现照片附件上传开发,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

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

开发流程

代码引入json

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

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

代码开发后端

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

<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 图片上传的个数限制ui

在当前页面的.js中编写this

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.gi...url

咱们关联云开发以后,咱们便可将照片上传到数据库中。

为方便管理,咱们能够建立CMS内容管理器。

建立CMS内容管理器

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

    2.云开发为你们准备了基础版,为你们提供了必定的免费额度。

    设置管理员帐号以及密码,舒适提示密码请牢记(若是忘记密码能够再内容管理器页面重置密码),设置完成后耐心等待系统初始化。

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

    4.咱们在内容模型中建立照片上传管理(这里模拟状况为仅须要用户上传和记录用户id)

    建立内容模型

    若是须要用户上传多张照片,在设置照片字段时候须要勾选容许用户上传多张照片!

    5.用户上传后咱们能够再内容集合,相应模型中查看。

效果展现

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