uniapp+uniCloud实现批量上传图片到云端(解决h5端跨域问题)

循环调用方法

永远不会太晚

3690人浏览 · 2022-08-25 14:25:38

永远不会太晚 · 2022-08-25 14:25:38 发布

批量上传图片到云端

流程：
1.uni.chooseImage选择图片，返回图片临时路径
2.根据图片临时路径数量，循环调用uniCloud.uploadFile上传图片到云存储，返回图片线上路径
3.调用云函数保存图片线上路径，以供后期查询

upload() {
      // 选择图片，默认不设置count属性的话最多9张
      uni.chooseImage({
        success(res) {
          // 通过遍历调用uniCloud.uploadFile来批量上传
          for (let i = 0; i < res.tempFilePaths.length; i++) {
            uni.showLoading({
              title: "上传中..."
            })
            let filePath = res.tempFilePaths[i] // 选择图片的临时路径
            const name = res.tempFiles[i].name // 选择图片的名称.后缀名
            uniCloud.uploadFile({
              filePath, // 必传，要上传的文件对象临时路径
              cloudPath: Date.now() + "-" + name, // 必传，保存在云端的文件名，这样写上传后就是原本的名称与后缀名
              success(res) {
                let imageUrl = res.fileID //云端返回的图片地址
                // 调用云函数保存图片数据
                uniCloud.callFunction({
                  name: "addImage", 
                  // 传给云函数的数据，可根据自身需求进行改动
                  data:{
                      imageUrl: imageUrl, // 图片路径
                      createTime: Date.now() // 创建时间
                  },
                  success: res => {
                    console.log(res)
                  },
                  fail: err => {
                    console.log(err)
                  },
                  complete: () => {}
                })
              },
              fail(err) {
                console.log(err)
              },
              complete() {
                uni.hideLoading()
              }
            })
          }
        }
      })
    },

云函数addImage

需要创建一个tableImages表

'use strict';
const db = uniCloud.database()
exports.main = async (event, context) => {
  const collection = db.collection('tableImages') // 云数据库里的表名 ，记录上传图片到云存储后返回的fileID
  const res = await collection.add(event) // event为客户端上传的参数
  return res
};