React结合Laravel后端如何实现文件移动操作

前端无法直接操作服务器文件系统（受浏览器安全机制限制），必须通过Laravel后端接口完成文件移动操作，具体步骤如下：

1. 后端实现文件移动接口 #

在Laravel中创建POST接口，通过框架提供的文件工具类处理文件移动逻辑：

定义路由（routes/api.php） #

Route::post('/move-file', [FileController::class, 'handleMove']);

编写控制器逻辑（app/Http/Controllers/FileController.php） #

<?php

namespace App\Http\Controllers;

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

class FileController extends Controller
{
    public function handleMove(Request $request)
    {
        // 验证请求参数
        $request->validate([
            'source' => 'required|string',
            'destination' => 'required|string',
        ]);

        $sourcePath = public_path($request->source);
        $destPath = public_path($request->destination);

        // 检查源文件是否存在
        if (!File::exists($sourcePath)) {
            return response()->json(['error' => '源文件不存在'], 404);
        }

        try {
            // 执行文件移动（自动覆盖目标路径同名文件，如需避免可提前判断目标文件是否存在）
            File::move($sourcePath, $destPath);
            return response()->json(['success' => '文件移动完成']);
        } catch (\Exception $e) {
            return response()->json(['error' => '移动失败：'.$e->getMessage()], 500);
        }
    }
}

2. 前端调用后端接口 #

在数据库存储成功后，发起请求调用移动文件接口：

axios
  .get("docuin/incoming.xml", {
    "Content-Type": "application/xml; charset=utf-8",
  })
  .then((response) => {
    var xml = new XMLParser().parseFromString(response.data);
    var from = xml.getElementsByTagName("ID")[0].value;
    
    // 先执行数据库存储请求
    return axios.post("/api/save-to-db", { id: from, xmlData: response.data });
  })
  .then(() => {
    // 数据库存储成功后，调用文件移动接口
    return axios.post("/api/move-file", {
      source: "docuin/incoming.xml",
      destination: "docout/outgoing.xml"
    });
  })
  .then((res) => {
    console.log(res.data.success);
  })
  .catch(err => {
    console.error("操作出错：", err.response?.data?.error || err.message);
  });

关键注意事项 #

• 确保服务器上docuin和docout目录存在且具备读写权限（可通过chmod命令配置，或使用Laravel的Storage类指定自定义磁盘）。
• 若文件不在public目录下，需将public_path()替换为storage_path()或对应自定义路径，并同步调整目录权限。
• 如需批量处理文件，可修改接口接收数组参数，实现批量移动逻辑。

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