vue 附件批量上传

在 Vue 中实现附件批量上传可以使用第三方库，比如 `vue-upload-component`。下面是一个简单的示例代码：

首先，安装 `vue-upload-component`：

npm install vue-upload-component

然后，在你的 Vue 组件中使用该组件：

<template>
  <div>
    <vue-upload-component
      ref="upload"
      :url="uploadUrl"
      :multiple="true"
      @input-file="handleFileUpload"
    ></vue-upload-component>
    <button @click="uploadFiles">上传</button>
  </div>
</template>

<script>
import VueUploadComponent from 'vue-upload-component';

export default {
  components: {
    VueUploadComponent,
  },
  data() {
    return {
      uploadUrl: '/your-upload-url',
      files: [],
    };
  },
  methods: {
    handleFileUpload(files) {
      this.files = files;
    },
    uploadFiles() {
      // 在这里执行上传逻辑，比如使用 axios 或其他方式发送请求
      // 可以遍历 this.files 数组，对每个文件执行上传操作
      // 示例中只打印文件名
      this.files.forEach((file) => {
        console.log(file.name);
      });
    },
  },
};
</script>

上述示例中，`vue-upload-component` 组件被引入并在模板中使用。通过 `ref` 属性可以获取到该组件的实例。`url` 属性指定上传文件的服务器端接口地址。`multiple` 属性设置为 `true`，允许多文件上传。`@input-file` 事件会在用户选择文件后触发，将选中的文件作为参数传递给 `handleFileUpload` 方法。

`uploadFiles` 方法中可以执行实际的上传操作。这里只是简单地打印了每个文件的文件名，你可以根据具体需求使用适当的方式进行文件上传操作。

请注意将示例代码中的 `/your-upload-url` 替换为真实的上传接口地址。