vue 在一次提交完成文件与信息 上传

Vue.js 提供了一种简单的方式来处理文件上传功能，通常通过`axios`或`vue-file-upload`等插件配合表单元素来实现。以下是一个基本的步骤：

1. 安装依赖：首先需要安装 Vue 的 Axios 或者 Element UI 等有文件上传组件的库。

   npm install axios element-ui uploadjs

2. 使用 Vue 组件：例如使用 Element UI 的 `el-upload` 组件：

<template>
  <div>
    <el-form-item label="文件上传">
      <el-upload
        action="your-api-url" /* 这里替换为你实际的文件上传地址 */
        :on-change="handleFileChange"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
        multiple
      >
        <i class="el-icon-upload"></i> 选择文件
      </el-upload>
    </el-form-item>
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  data() {
    return {
      fileList: ref([]), // 存储已选文件列表
    };
  },
  methods: {
    handleFileChange(files) {
      this.fileList.value = files; // 更新文件列表
    },
    handleSuccess(response, file) {
      console.log('文件上传成功', response, file);
      // 可在此处处理上传成功的回调，比如将响应数据保存到服务器或者其他地方
    },
    beforeUpload(file) {
      if (file.size > 1048576) { // 检查文件大小限制
        alert('文件过大');
        return false;
      }
      return true;
    },
  },
};
</script>

在这个例子中，`before-upload`钩子用于在上传前检查文件大小，`on-change`用于更新文件列表，`on-success`则处理上传后的回调。用户可以选择多个文件并一次性提交。