vue3实现多张图片上传

以下是使用Vue3实现多张图片上传的示例代码：

<template>
  <div>
    <input type="file" ref="fileInput" multiple @change="handleFileUpload">
    <div v-for="(image, index) in images" :key="index">
      <img :src="image" alt="uploaded image" width="200">
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const images = ref([]);

    const handleFileUpload = (event) => {
      const files = event.target.files;
      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          images.value.push(reader.result);
        };
      }
    };

    return {
      images,
      handleFileUpload,
    };
  },
};
</script>

在这个示例中，我们使用了Vue3的Composition API来实现多张图片上传。我们首先使用`ref`函数创建了一个响应式的`images`数组，用于存储上传的图片。然后，我们在模板中使用`<input>`元素来让用户选择要上传的图片，并在`@change`事件中调用`handleFileUpload`方法来处理上传的图片。在`handleFileUpload`方法中，我们首先获取用户选择的文件，然后使用`FileReader`对象将文件转换为Base64编码的字符串，并将其添加到`images`数组中。最后，我们使用`v-for`指令在模板中循环渲染所有上传的图片。