vue2 文件上传列表

在Vue2中实现文件上传列表可以使用Vue的组件化特性，以及HTML5的FormData和XMLHttpRequest API。

首先，你需要创建一个Vue组件来处理文件上传和显示上传列表。以下是一个简单的示例：

<template>
  <div>
    <form>
      <input type="file" ref="fileInput" @change="handleFileUpload">
    </form>
    <ul>
      <li v-for="(file, index) in fileList" :key="index">{{ file.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleFileUpload() {
      const files = this.$refs.fileInput.files;
      const formData = new FormData();

      for (let i = 0; i < files.length; i++) {
        formData.append('file[]', files[i]);
        this.fileList.push(files[i]);
      }

      // 发送文件到服务器
      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/upload');
      xhr.send(formData);
    }
  }
};
</script>

在上面的代码中，我们首先定义了一个包含一个文件上传表单和一个上传列表的Vue组件。当用户选择文件并上传时，我们使用FormData对象将文件添加到表单数据中，并将文件添加到我们的上传列表中。然后，我们使用XMLHttpRequest对象将表单数据发送到服务器。

如果你需要在上传期间显示进度条或者处理上传失败的情况，你可以使用XMLHttpRequest提供的事件来实现这些功能。