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

逃离我推掉我的手 2024-04-08 12:12 85阅读 0赞

### 批量上传图片到云端 ###

流程：  
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
    };

### uncloud-h5端上传图片跨域 ###

微信端和手机端都能正常使用，但h5端会遇到跨域问题

需要在unicloud-web控制台>跨域配置>新增域名>设置安全域名

比如我前端h5地址是`http://172.16.0.152:8081/#/`

则安全域名设置为`172.16.0.152:8081`  
![在这里插入图片描述][cad3d857086d4a3295514d29be53e350.png]

[cad3d857086d4a3295514d29be53e350.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/c17f013d0e3a4214805635cbdf5632e4.png