vue 附件资料上传

在 Vue 中实现附件资料上传可以通过使用第三方库来简化开发过程。以下是一个基本的示例：

首先，你需要安装 `vue-upload-component` 这个库。可以通过以下命令进行安装：

npm install vue-upload-component

然后，在你的 Vue 组件中引入该库，并在模板中使用 `<file-upload>` 组件来处理文件上传。下面是一个示例代码：

<template>
  <div>
    <file-upload
      ref="fileUpload"
      v-model="uploadedFiles"
      post-action="/api/upload"
      :multiple="true"
    >
      <button>选择文件</button>
    </file-upload>
    <button @click="uploadFiles">上传</button>
  </div>
</template>

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

export default {
  components: {
    FileUpload
  },
  data() {
    return {
      uploadedFiles: []
    };
  },
  methods: {
    uploadFiles() {
      // 在这里可以处理上传的文件，比如调用 API 发送文件到服务器
      this.$refs.fileUpload.start();    }
  }
};
</script>

在上面的示例中，`<file-upload>` 组件绑定了一个 `v-model`，用于存储上传的文件信息。`post-action` 属性指定了文件上传的 API 地址，你需要根据自己的后端实现来设置正确的地址。`multiple` 属性表示是否支持多文件上传。

当用户选择文件后，文件信息会被保存在 `uploadedFiles` 数组中。在点击 "上传" 按钮时，可以通过调用 `this.$refs.fileUpload.start()` 方法来触发文件上传的过程。

注意：以上示例仅演示了基本的文件上传功能，实际使用时可能还需要处理文件类型、文件大小限制等其他逻辑。