路径可以使用以下这些,前面是云存储文件夹路径,i是for循环每张图片的数组下标,或用时间,或用随机数,最后面是后缀

cloudPath:'images/CampusMap/pictures/' + i /(new Date().getTime())/(Math.floor(Math.random()*1000000))+'.png'

修改图片,如果有已经上传到存储的图片,还要与原来的上传至云存储图片作对比,不然会报错,因为只能用http开头的图片链接,原来图片没有修改的直接赋值即可。对比代码如下:

compare(v){
    let flag = false;
    this.data.fuben.forEach((w,i)=>{
        if(w === v){
          console.log("第"+ i +"张图片相同");
          flag = true;
        }
    })
    return flag;
  },

最重要的是要注意异步问题,比如上传图片和更新数据库这两个过程必须要转为同步,不然数据库没有数据!

var UploadImgs = [];
  wx.showLoading({
    title: '正在上传图片...',
    mask:true
  })
  let promiseArr = [];//创建一个数组来存储一会的promise操作
  //遍历选中的图片,用let定义变量会形成一个闭包,在该作用域执行完之前,变量的值不会发生改变,防止异步导致变量发生变化
  for(let i =0; i< this.data.chooseImgs.length;i++){
    //往数据中push promise操作
    promiseArr.push(new Promise((reslove,reject)=>{
      //一个一个取出图片数组的临时地址
      let item = this.data.chooseImgs[i];
      wx.cloud.uploadFile({
        cloudPath:'images/CampusMap/pictures/' + this.data.name+ i +'.png',//上传至云端的路径
        filePath: item,//小程序临时文件路径
        success: res =>{
          //执行成功的吧云存储的地址一个一个push进去
          UploadImgs.push(res.fileID);
          console.log(res.fileID+"第"+i+"张图片");
          //如果执行成功,就执行成功的回调函数
          reslove();
            wx.hideLoading();
            wx.showToast({
              title: '上传成功!',
            });
        },
        fail:res=>{
          wx.hideLoading();
          wx.showToast({
            title: '上传失败!!!',
          });
        }
        })
    }))
  }
  Promise.all(promiseArr).then(res=>{//等promose数组都做完后做then方法
    console.log("图片上传完成后再执行");
    const db = wx.cloud.database();
          db.collection('school').add({
            data: {
              name:this.data.name,
              type:1,
              detail:this.data.textVal,
              imageUrl:UploadImgs
            },
            success: res => {
              // 在返回结果
              wx.showToast({
                title: '添加成功',
                //防止用户反复点击
                mask:true,
              })
              this.setData({
                textVal:"",
                chooseImgs:[],
                name:''
              })
              setTimeout(function () {
                //返回上一个页面
                wx.navigateBack({
                delta: 1,
          })
              }, 800)
            },
            fail: console.error
          })

  })

ps:多张图片拼接及删除,代码如下

//点击“+”选择图片
handleChooseImg(){
  //调用小程序内置的选择图片api
  wx.chooseImage({
    count: 9,
    sizeType:['original','compressed'],
    sourceType:['album','camera'],
    success: (result) => {
      this.setData({
        //图片数组 进行拼接
        chooseImgs:[...this.data.chooseImgs,...result.tempFilePaths]
      })
      
    }
  })
},
  //点击自定义图片组件
  handleRemoveImg(e){
    //获取被点击的组件的索引
    const {index} = e.currentTarget.dataset;
    //获取data中的图片数组
    let {chooseImgs}=this.data;
    //删除元素
    chooseImgs.splice(index,1);
    this.setData({
      chooseImgs
    })
  },
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐