Actual combat|How to use cloud development to realize photo attachment upload development

Cloud development is a cloud-native integrated development environment and tool platform provided by Tencent Cloud. It provides developers with highly available, automatic and elastic back-end cloud services that can be used for cloud-integrated development of multiple end-applications.

Development Process

code introduced

Introduce components in the .json of the current page

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

code development

Write the upload component in the current page.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 The event of image upload failure, detail is {type, errMsg}, type 1 means that the image exceeds the size limit, type 2 means that the image selection failed, and type 3 means that the image upload failed.
bindselect The event triggered by image selection, detail is {tempFilePaths, tempFiles, contents}, where tempFiles and tempFilePaths are the fields returned by chooseImage, and contents represent the binary buffer list of the selected image
max-count limit on the number of images uploaded

Write in the .js of the current page

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)
}
});

Property reference document: https://wechat-miniprogram.github.io/weui/docs/uploader.html

After we associate with the cloud development, we can upload the photos to the database.

To facilitate management, we can create a CMS content manager.

Create a CMS content manager

Click Cloud Development->More->Content Management to activate.
2. Cloud Development has prepared a basic version for everyone, and provides a certain amount of free for everyone.
Set the administrator account and password. Please remember the warm reminder password (if you forget the password, you can reset the password on the content manager page), and wait patiently for the system to initialize after the setting is completed.
3. After logging in to the page according to the access address provided on the page, create a new project (here, take the garden holiday as an example)
4. We create photo upload management in the content model (the simulation here is that only the user is required to upload and record the user id)
Create a content model
If you need users to upload multiple photos, you need to check Allow users to upload multiple photos when setting the photo field!
5. After the user uploads, we can collect the content and view it in the corresponding model.