unicloud38-项目改造 图片渲染到首页及详情页

在首页渲染图片

通过if判断来做，数据库中有图才显示 在做这个判断时要注意：先得判断数据库中有没有picuarls这个字段，有这个字段，还要判断这个字段有没有值，否则如果不判断有没有这个字段会报没有length，判断picurls长度这里不屑也能正常显示，应该是为了保证不出错写的

        <view class="pic">
          <!-- 先判断是否有图片 -->
          <!-- 有图就显示第一张图，没图就显示默认图片 -->
          <!-- 前面要先判断有没有picurls这个属性，否则报找不到length -->
          <image v-if="item.picurls && item.picurls.length" :src="item.picurls[0]" mode="aspectFill"></image>
          <image v-else src="../../static/images/nopic.jpg" mode="aspectFill"></image>
        </view>

在详情页中渲染图片

在详情页detail.vue中

      <!-- detail里就能拿到picurls -->
      <view class="picurls" v-if="detail.picurls && detail.picurls.length">
        <image v-for="item in detail.picurls" :src="item" mode="widthFix"></image> 
      </view>
      
    .picurls{
      padding-top: 50rpx;
      width: 100%;
      // 把盒子转为块元素
      display: block;
      margin-bottom:30rpx;
    }

现在有一个问题，如果原本有图片，在修改页面添加新图片后，原本老的图片会被新的图片覆盖 edit.vue

之前是直接把新添加的图片提交到云函数了，老的图片地址是imageValue， 在页面中点击添加图片后，新的老的图片都会在imageValue中 这个属性的值是一个数组包含的多个对象，每张图的信息一个对象

          // 将获取到的用户输入传递到服务器
          data:{
            // detail:detail
            detail:this.formValue,
            picurls:this.picurls
          }

在点击提交方法中实现这个功能,原理就是将保存在imageValue中的url遍历出来保存到一个新的数组中，然后将这个数组传递到云函数进行保存

      // 点击提交触发此方法
      onSubmit(e){
        // 拼接新老图片 不拼接图片老的图片会被新的覆盖
        // 所有图片都在imageValue中,通过map遍历,将所有图片的url取出来,当道数组中
        let allPic = this.imageValue.map(item=>{
          return item.url;
        })
        // 获取到用户输入并赋值 
        // 这一句不用了,因为上面formValue是双向绑定的
        // 可以直接拿到用户修改的值
        // 在下面直接把formValue放在data中传递到后端即可
        // let detail=e.detail.value
        // 接收云函数传过来的值
        uniCloud.callFunction({
          name:"art_update_row",
          // 将获取到的用户输入传递到服务器
          data:{
            // detail:detail
            detail:this.formValue,
            picurls:allPic
          }
        }).then(res=>{
          uni.showToast({
            title:"修改成功"
          })
          setTimeout(()=>{
            uni.navigateBack()
          },800)
        })
      }
    }