vue上传操作，有两个地方要上传两个文件，可以都使用file-list来确定v-model

在Vue 3中，`v-model`通常用于单个值的双向绑定，而文件上传涉及到多个文件选择，这时可能需要利用`file-list`属性来管理。不过，如果你想要在同一个组件内实现对两个不同文件的选择并分别通过`v-model`控制，你可以创建两个独立的`FileList`实例。

**示例1: 使用v-model与file-list**
对于两个不同的上传区域，你可以这样设置：

<template>
  <div>
    <input type="file" v-model="file1" multiple />
    <child-component v-model.file="file1" :file-list="file1" />

    <input type="file" v-model="file2" multiple />
    <child-component v-model.file="file2" :file-list="file2" />
  </div>
</template>

<script setup>
import ChildComponent from "./ChildComponent.vue";

const file1 = ref(null);
const file2 = ref(null);

// 假设ChildComponent接受一个file-list prop
</script>

在这个例子中，`file1` 和 `file2` 是两个独立的`ref`，它们各自对应一个`input`元素的`v-model`。`ChildComponent`应该接收`file-list`作为props以便访问所选文件。

**示例2: 使用事件监听上传确认**
另一种方式是，每个`input`元素监听`change`事件，然后触发一个自定义事件（如`@confirm`）传递文件数据到父组件：

<!-- 示例2 -->
<template>
  <div>
    <input type="file" @change="handleFileChange(1)" />
    <child-component :files-to-confirm="fileToConfirm1" @confirm="confirmFiles" />

    <input type="file" @change="handleFileChange(2)" />
    <child-component :files-to-confirm="fileToConfirm2" @confirm="confirmFiles" />
  </div>
</template>

<script setup>
import ChildComponent from "./ChildComponent.vue";
import {ref} from "vue";

const fileToConfirm1 = ref([]);
const fileToConfirm2 = ref([]);

function handleFileChange(index) {
  const files = event.target.files;
  fileToConfirm[index].value = files;
}

function confirmFiles(files) {
  // 处理文件上传逻辑，比如更新对应的fileToConfirm数组
  fileToConfirm[index].value = files;
}
</script>

在这个方案中，`fileToConfirm1` 和 `fileToConfirm2` 分别存储待确认的文件，当点击上传按钮时，`confirmFiles` 函数会被调用，更新这些引用。