vue3 向对应照片模板上传图片

Vue进行照片墙拼图时，有一个页面让前端初学者很苦恼
该页面包含一个由几个div拼成的模板，还有一个上传按钮，想实现点击其中一个div，再点击上传按钮，所选择图片url就会替代对应div中图片的url
以下是我的步骤（只写了一个点击事件）：

<div class="photo3-box">
    <div class="img1" id="img1" @click="Onclick($event)" >
        <img :src="img1" />
    div>
    <div class="img2">
        <img :src="img2"/>
    div>
    <div class="img3">
        <img :src="img3"/>
    div>
div>

<input class="file-upload" type="file" accept="image/*" ref="leftFile" @change="getFile($event)"/>

<div class="photoBtn">
    <div class="btn2" @click="photoUplode">
        <img src="../../assets/img/按钮.png"/>
        <p>上传图片p>
    div>
div>


getFile(e){
            let file = e.target.files[0];
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload=(data)=>{
                this.img1=data.target.result;
            }
},
        photoUplode(){
            this.$refs.leftFile.click();
        }
目前只能实现通过点击上传按钮像固定div中上传图片，我本来想改变this.img1=data.target.result中img1确定上传图片展示的位置，但是一直没有思路
请教各位（鞠躬）！！
使用的配置：vue.js3.0+router+axios+vant 是移动网页

是不是这样的效果?

img

我这里用的是vue2.0的语法，如果是vue3.0的话还需要改改。

<template>
  <div class="home">
    <div class="photo3-box">
      <div class="img1" :class="{ active: currentImg == 'img1' }" @click="checkCurrentImg('img1')">
        <img v-show="img1" :src="img1" />
      </div>
      <div class="img2" :class="{ active: currentImg == 'img2' }" @click="checkCurrentImg('img2')">
        <img v-show="img2" :src="img2" />
      </div>
      <div class="img3" :class="{ active: currentImg == 'img3' }" @click="checkCurrentImg('img3')">
        <img v-show="img3" :src="img3" />
      </div>
    </div>

    <input class="file-upload" v-show="false" type="file" accept="image/*" ref="leftFile" @change="fileChange($event)" />

    <div class="photoBtn">
      <div class="btn2" @click="photoUpload">
        <!-- <img src="../assets/logo.png" /> -->
        <p>上传图片</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img1: "",
      img2: "",
      img3: "",
      currentImg: "img1",
    };
  },
  methods: {
    checkCurrentImg(name) {
      this.currentImg = name;
    },
    photoUpload() {
      this.$refs.leftFile.click();
    },
    fileChange(e) {
      let file = e.target.files[0];
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (data) => {
        this[this.currentImg] = data.target.result;
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.img1 {
  display: inline-block;
  width: 100px;
  height: 200px;
  background: rgb(106, 190, 186);
  box-sizing: border-box;
}
.img2 {
  display: inline-block;
  width: 100px;
  height: 200px;
  background: rgb(87, 185, 103);
  box-sizing: border-box;
}
.img3 {
  display: inline-block;
  width: 200px;
  height: 100px;
  background: rgb(74, 55, 119);
  box-sizing: border-box;
}


.photo3-box {
  .active{
    border: 1px solid #f00;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
</style>

点击上传图片div区域，上传图片，上传完成后显示，当大于上传图片数量限制后，上传图片区域隐藏，这个博主的文章和您的需求差不多，我觉得你可以借鉴下:
vue3 + elementPlus 上传图片
https://blog.csdn.net/thingir/article/details/124802295

不知道你解决了没有？

如果没有解决，我们可以聊聊；

欢迎来交流

您可以在点击 div 的事件中添加一个变量来记录当前选中的 div，然后在上传图片时使用这个变量来更新对应的图片 url。

首先，在 data 中添加一个变量 selectedDiv，并将其初始化为 null。

data(){
return{
selectedDiv: null,
}
}

然后，在点击 div 的事件中，更新 selectedDiv 变量的值为点击的 div 的 id。

Onclick(e){
this.selectedDiv = e.target.id
}

最后，在上传图片时，使用 selectedDiv 变量来更新对应的图片 url。

getFile(e){
let file = e.target.files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload=(data)=>{
this[this.selectedDiv] = data.target.result;
}
}

这样就可以实现点击其中一个div，再点击上传按钮，所选择图片url就会替代对应div中图片的url。

望采纳。