Laravel中Vue实现文件列表增删及提交后上传的可行性问询

这完全可行，下面是具体实现方案：

一、Vue前端实现 #

1. 调整数据与模板 #

在Vue组件的data里定义存储文件的数组，若涉及编辑场景，还需记录已上传文件和待删除的原有文件标识：

data() {
  return {
    files: [], // 存储选中的新文件
    existingFiles: [], // 编辑场景下，存储已上传的服务器文件信息（ID/路径等）
    deletedExistingFiles: [] // 记录要删除的原有文件ID
  }
}

修改模板，添加文件列表展示和删除按钮：

<template>
  <div>
    <!-- 文件选择框 -->
    <input type="file" name="files[]" class="form-control-file" @change="onChangeFiles" multiple />
    
    <!-- 待上传新文件列表 -->
    <div v-if="files.length > 0" class="mt-3">
      <h5>待上传文件</h5>
      <div v-for="(file, index) in files" :key="index" class="d-flex align-items-center mb-2">
        <span class="me-3">{{ file.name }}</span>
        <button @click="removeNewFile(index)" class="btn btn-sm btn-danger">删除</button>
      </div>
    </div>

    <!-- 已上传文件列表（编辑场景用） -->
    <div v-if="existingFiles.length > 0" class="mt-3">
      <h5>已上传文件</h5>
      <div v-for="file in existingFiles" :key="file.id" class="d-flex align-items-center mb-2">
        <span class="me-3">{{ file.name }}</span>
        <button @click="removeExistingFile(file.id)" class="btn btn-sm btn-danger">删除</button>
      </div>
    </div>

    <!-- 提交按钮 -->
    <button @click="submitForm" class="btn btn-primary mt-4">提交</button>
  </div>
</template>

2. 实现核心方法 #

完善文件选择、删除和提交逻辑：

methods: {
  onChangeFiles(event) {
    // 将选中的所有文件加入数组，而非仅取第一个
    Array.from(event.target.files).forEach(file => {
      this.files.push(file);
    });
    // 清空输入框，允许重复选择相同文件
    event.target.value = '';
  },
  removeNewFile(index) {
    this.files.splice(index, 1);
  },
  removeExistingFile(fileId) {
    // 记录待删除的原有文件ID，提交时告知后端
    this.deletedExistingFiles.push(fileId);
    // 从展示列表中移除
    this.existingFiles = this.existingFiles.filter(file => file.id !== fileId);
  },
  async submitForm() {
    const formData = new FormData();
    
    // 添加新文件到FormData
    this.files.forEach(file => {
      formData.append('files[]', file);
    });
    
    // 添加待删除的原有文件ID
    this.deletedExistingFiles.forEach(id => {
      formData.append('deleted_files[]', id);
    });

    // 若为编辑场景，可添加关联模型ID等参数
    // formData.append('post_id', this.postId);

    // 发送请求到Laravel后端
    try {
      const response = await axios.post('/upload-files', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
      // 处理成功逻辑，如提示、页面跳转
      alert('操作成功');
    } catch (error) {
      // 处理错误
      console.error('上传失败', error);
      alert('操作失败，请重试');
    }
  }
}

二、Laravel后端处理 #

1. 定义路由 #

在routes/web.php或routes/api.php中添加路由：

use App\Http\Controllers\FileUploadController;

Route::post('/upload-files', [FileUploadController::class, 'store']);

2. 创建控制器处理上传 #

生成控制器并编写逻辑：

php artisan make:controller FileUploadController

控制器代码：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class FileUploadController extends Controller
{
    public function store(Request $request)
    {
        // 验证文件规则，可根据需求调整
        $request->validate([
            'files.*' => 'file|mimes:jpg,jpeg,png,pdf|max:2048',
        ]);

        // 处理新文件上传
        $uploadedFiles = [];
        if ($request->hasFile('files')) {
            foreach ($request->file('files') as $file) {
                $path = $file->store('uploads', 'public'); // 存储到public磁盘，路径为storage/app/public/uploads
                $uploadedFiles[] = [
                    'name' => $file->getClientOriginalName(),
                    'path' => $path,
                    'url' => Storage::url($path)
                ];
                // 若需关联模型，可在此将文件信息写入对应数据表
                // \App\Models\File::create([...]);
            }
        }

        // 处理原有文件删除
        if ($request->has('deleted_files')) {
            foreach ($request->input('deleted_files') as fileId) {
                $fileRecord = \App\Models\File::find($fileId);
                if ($fileRecord) {
                    Storage::delete($fileRecord->path);
                    $fileRecord->delete();
                }
            }
        }

        return response()->json([
            'message' => '操作成功',
            'uploaded' => $uploadedFiles,
            'deleted_count' => count($request->input('deleted_files', []))
        ]);
    }
}

3. 配置文件存储 #

确保config/filesystems.php中public磁盘配置正确，执行软链接命令让文件可通过Web访问：

php artisan storage:link

三、注意事项 #

• 编辑场景下，需在组件初始化时从后端获取已上传文件列表，赋值给existingFiles
• 文件验证规则可根据业务需求调整，如允许的文件类型、大小限制
• 大文件上传可考虑分片上传，普通场景上述方案足够覆盖需求

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