vant van-uploader组件实现点击图片进行编辑（更换图片）

最新推荐文章于 2024-08-29 07:30:44 发布

小小白号

最新推荐文章于 2024-08-29 07:30:44 发布

阅读量2.3k

点赞数

分类专栏： vue 文章标签： css html vue3+vant

本文链接：https://blog.csdn.net/WiseGirls/article/details/126179018

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vue的van-uploader组件创建两个样式一致但功能各异的图片上传器。组件1用于触发图片选取并传递数据到组件2，而组件2展示已选取图片。通过v-model和after-read事件，实现了图片的无缝切换和数据管理。

摘要由CSDN通过智能技术生成

示例图：

在这里插入图片描述
思路：
1.写两个uploader组件，确保他们样式一样，定位将他们重叠放在同一个位置。给其中一个uploader组件设置z-index，让她位于上方（以下称为组件1），组件1用于触发选取图片的方法，组件2用于展示选取好的图片

2.为组件1使用v-model绑定fileList1，用于存储选取的图片信息，再使用after-read属性绑定一个读取图片成功后会触发的方法ClickFile；同理，为组件2使用v-model绑定fileImg，组件2不需要任何的方法

3.点击组件1，选取图片成功后，触发ClickFile，在ClickFile中将fileList1赋值给fileImg，并清空fileList（赋值成空数组，保证组件1内不显示图片），这样组件1内依旧是空的，还可以触发选取图片的方法，而组件2，已经存储了组件1的数据。

代码：
html

<div class="uploadBox">
   <p>
      附件照片
      <span v-if="!ImgData">(未添加，点击添加)</span>
      <span v-if="ImgData">(已添加，点击编辑)</span>
   </p>
   <div class="uploadImg">
      <van-uploader v-model="fileImg" multiple :max-count="1" :deletable="false" :preview-full-image="false">
         <van-button icon="plus" type="primary">添加照片</van-button>
      </van-uploader>
   </div>
   <div class="uploadImg" style="z-index:99">
       <van-uploader v-model="fileList" multiple :max-count="1" :deletable="false" :preview-full-image="false"
            :after-read="ClickFile">
         <van-button type="primary"></van-button>
       </van-uploader>
   </div>
</div>

script

// 文件上传
 let fileImg = ref([])
 let fileList = ref([]);
 let ClickFile = (file) => {
	 fileImg.value = fileList.value
	 fileList.value = []
 }

style

.uploadBox {
  position: relative;
  height: 150px;

  .uploadImg {
    position: absolute;
    left: 0px;
    top: 40px;
    width: 100%;
    height: 100px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

:deep(.van-uploader) {
  width: 100%;
  height: 100px;

  .van-uploader__wrapper {
    display: block;
    height: 100%;
  }

  .van-uploader__file {
    display: none;
  }

  .van-uploader__preview {
    height: 100%;
    margin: 0px;

    .van-uploader__preview-image {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .van-uploader__input-wrapper {
    height: 100%;

    .van-button--primary {
      width: 100%;
      height: 100%;
      border: 1px solid #EEEEEE;
      background: none;
      color: #427CE8;
    }
  }
}