Vue.js与Laravel实现文件数组上传方法及运行无效果排查

前端侧代码问题修正 #

当前前端代码存在多处会直接导致功能失效的问题，按优先级逐一说明：

• 文件选择框缺失多文件支持属性：<input type="file"> 需补充 multiple 属性，否则原生控件根本无法支持多选文件
• FormData 传参逻辑错误：直接将整个 files 数组作为单个值追加到请求字段，未逐个遍历文件对象追加，后端无法识别合法的文件结构
• Axios 请求配置误导：手动设置 Content-Type: multipart/form-data 会覆盖浏览器自动生成的 boundary 边界标识，导致 Laravel 完全无法解析请求中的文件内容，该配置不需要手动声明，Axios 会自动根据请求内容设置正确的请求头
• 代码语法截断：现有代码中 catch 回调块、handleSubmit 方法存在括号不匹配问题，浏览器执行时会直接抛出语法错误，根本无法走到接口请求环节
• 文件收集逻辑缺陷：每次触发 change 事件时未清空旧的文件列表，重复选择文件会导致数组内容冗余

修复后的前端组件参考代码 #

<template>
  <form @submit.prevent="handleSubmit">
    <label>Course Module PDF</label>
    <input 
      type="file" 
      class="form-control-file" 
      multiple
      @change="onChangeFiles" 
    />
    <button type="submit">提交上传</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      files: [],
      isLoading: false
    };
  },
  methods: {
    handleSubmit() {
      this.isLoading = true;
      let data = new FormData();
      // 循环遍历逐个追加文件
      this.files.forEach(file => {
        data.append("files[]", file);
      });

      axios.post("/add-course", data)
        .then(res => {
          this.isLoading = false;
          console.log('Success', res.data);
        })
        .catch(error => {
          this.isLoading = false;
          console.log(error);
        })
    },
    onChangeFiles(event) {
      // 收集选中的所有文件，替换旧的列表
      this.files = Array.from(event.target.files);
    },
  },
};
</script>

后端控制器代码问题修正 #

现有控制器代码存在多处逻辑偏差，会导致文件无法正常存储：

• 文件取值错误：$request->files 是请求携带的所有文件集合的总Bag对象，需要通过 $request->file('files[]') 专门获取前端传的文件数组
• 文件存储路径逻辑错误：$file->move() 方法的两个参数分别是「目标目录绝对路径」、「目标保存的文件名」，现有代码将拼接的全路径作为文件名传入，会导致路径嵌套错误
• 文件命名冲突：仅使用时间戳作为文件名，同一秒上传的多个文件会直接重名覆盖，需要补充随机串做唯一性区分
• 缺少基础校验：未判断目标目录是否存在、是否有写入权限，也未限制上传文件的格式与大小

修复后的控制器参考代码 #

public function uploadCourseFiles(Request $request)
{
    // 校验前端传的文件是否合法
    $request->validate([
        'files.*' => 'mimes:pdf|max:10240' // 限制仅允许PDF，单文件最大10M
    ]);

    $files = $request->file('files[]');
    $upload_path = public_path('backend/files/');
    // 确保目录存在，不存在则自动创建
    if (!file_exists($upload_path)) {
        mkdir($upload_path, 0755, true);
    }

    if (count($files) > 0) {
        foreach ($files as $file) {
            $ext = $file->getClientOriginalExtension();
            // 文件名拼接时间戳+随机串避免重名
            $name = time().'-'.Str::random(10).".".$ext;
            // move方法：第一个参数是目录，第二个是文件名
            $file->move($upload_path, $name);
        }
    }

    return response("Success");
}

容易遗漏的通用配置检查 #

• 路由中间件配置：如果是纯前后端分离接口，需要在 app/Http/Kernel.php 中排除 /add-course 路由的CSRF校验，或者在Axios请求中携带页面的CSRF Token，否则请求会被Laravel返回419状态拦截，直观表现为“操作无任何效果”
• PHP环境配置：检查 php.ini 中的 upload_max_filesize、post_max_size 配置值，上传文件大小超过限制时，后端会直接丢失文件参数
• 目录权限：确保 public/backend/files 目录有 Web 用户的写入权限，权限不足时文件移动操作会直接抛异常

内容的提问来源于stack exchange，提问作者Joney Spark