vue 使用js实现批量上传图片功能并回显图片

在Vue中实现批量上传图片并回显的功能，可以使用以下步骤：

1. 使用<input type="file" multiple>来允许用户选择多个图片。
2. 使用JavaScript的FormData对象来构建表单数据，用于上传图片。
3. 使用axios或其他HTTP客户端发送图片数据到服务器。
4. 服务器处理图片上传，并返回图片的URL。
5. 将返回的图片URL回显在Vue组件中。

以下是实现该功能的示例代码：

<template>
  <div>
    <input type="file" multiple @change="uploadImages" />
    <div v-for="(imageUrl, index) in imageUrls" :key="index">
      <img :src="imageUrl" alt="uploaded image" />
    </div>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      imageUrls: [],
    };
  },
  methods: {
    uploadImages(event) {
      const files = event.target.files;
      const formData = new FormData();
      for (let i = 0; i < files.length; i++) {
        formData.append('images[]', files[i]);
      }
 
      axios.post('/upload-endpoint', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })
      .then(response => {
        this.imageUrls = response.data.imageUrls;
      })
      .catch(error => {
        console.error('Error uploading images:', error);
      });
    },
  },
};
</script>

确保服务器端的/upload-endpoint路径是用来处理图片上传的，并且返回的数据格式要与Vue组件中的处理一致。