Laravel音频提交表单点击无响应问题求助

我创建了一个保存音频文件的表单，配套了SoundController控制器及对应路由。展示视图的路由均正常工作，但点击表单提交按钮后仅页面刷新，无法完成音频数据存储。控制台无报错，其他控制器的POST请求正常运行。使用PHP 8.1.13、Laravel 10版本，相关代码如下：

控制器代码 #

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use App\Models\Sound;
use Illuminate\Http\Request;

class SoundController extends Controller
{
    public function AllSound(){
        $sounds = Sound::latest()->get();
        return view('admin.all_sound',compact('sounds'));
    } // end function

    public function AddSound(){
        return view('admin.add_sound');
    } // end function


    public function StoreSound(Request $request){

        // validation
        $request->validate([
            'name' => 'required|max:200',
            'so_file' => 'required',
            'caty' => 'required'
        ]);

        
            $file = $request->file("so_file");
            $filename = date('YmdHi').$file->getClientOriginalName();
            $move = $file->move(public_path('upload/sound_files/'),$filename);
            

           if($move){
            $sound = new Sound();
            $sound->name = $request->input('so_name');
            $sound->type = $request->input('caty');
            $sound->music = $filename;

            $sound->save();
            $notification = array(
                'message' => 'Sound saved Successfully',
                'alert-type' => 'success'
            );
            return redirect()->route('all.sound')->with($notification);
           }else{
            $notification = array(
                'message' => 'Sound not moved !',
                'alert-type' => 'error'
            );
            return redirect()->route('all.sound')->with($notification);
           }

        
    } // end function
}

路由代码 #

Route::get('/admin/all/sounds', [SoundController::class, 'AllSound'])->name('all.sound');
Route::get('/admin/add/sounds', [SoundController::class, 'AddSound'])->name('add.sound');
Route::get('/edit/sound/{id}',[SoundController::class, 'EditSound'])->name('edit.sound');
Route::get('/delete/sound/{id}',[SoundController::class, 'DeleteSound'])->name('delete.sound');
Route::post('/store/sound',[SoundController::class, 'StoreSound'])->name('store.sound');

表单代码 #

<form class="forms-sample" action="{{ route('store.sound') }}" method="POST" enctype="multipart/form-data" >
    @csrf

    <div class="mb-3">
        <label for="so_name" class="form-label">Name</label>
        <input type="text" name="so_name" class="form-control 
        @error('so_name') is-invalid @enderror">
    
   @error('so_name')
    <span class="text-danger"> {{ $message }} </span>
   @enderror
   
   
    </div>
    <div class="mb-3">
        <label for="caty" class="form-label">Type</label>
        <select name="caty">
            <option value="asmr">ASMR</option>
            <option value="whiteNoise">White Noise</option>
            <option value="sleep">Sleep</option>
            <option value="nature">Nature</option>
            <option value="instru">Instrumentals</option>
        </select>
    
   @error('caty')
    <span class="text-danger"> {{ $message }} </span>
   @enderror
   
   
    </div>
    <div class="mb-3">
        <label for="so_file" class="form-label">Sound File</label>
        <input type="file" name="so_file" class="form-control 
        @error('so_file') is-invalid @enderror">
    
   @error('so_file')
    <span class="text-danger"> {{ $message }} </span>
   @enderror
   
   
    </div>
    <button type="submit" class="btn btn-primary me-2">Save changes</button>
    
</form>

1. 验证规则字段名不匹配（核心问题） #

控制器StoreSound方法的验证规则中使用了'name' => 'required|max:200'，但表单对应的输入框name属性是so_name。Laravel验证失败会自动重定向回表单页面，但如果没有正确渲染错误提示，就会表现为页面仅刷新无反应。

修正验证规则：

$request->validate([
    'so_name' => 'required|max:200', // 改为表单对应的name字段
    'so_file' => 'required',
    'caty' => 'required'
]);

2. 文件上传路径权限与存在性检查 #

确保public/upload/sound_files/目录存在且服务器有写入权限，Linux环境可执行以下命令：

mkdir -p public/upload/sound_files
chmod -R 755 public/upload/sound_files

也可以在控制器中主动创建目录，避免因目录不存在导致上传失败：

$uploadPath = public_path('upload/sound_files/');
if(!file_exists($uploadPath)){
    mkdir($uploadPath, 0755, true);
}
$move = $file->move($uploadPath, $filename);

3. 可选优化：添加文件类型验证 #

为避免上传非音频文件，可在验证规则中限制文件类型和大小：

'so_file' => 'required|file|mimes:mp3,wav,ogg|max:10240', // 限制为MP3/WAV/OGG，最大10MB

修正后的完整控制器代码 #

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use App\Models\Sound;
use Illuminate\Http\Request;

class SoundController extends Controller
{
    public function AllSound(){
        $sounds = Sound::latest()->get();
        return view('admin.all_sound',compact('sounds'));
    }

    public function AddSound(){
        return view('admin.add_sound');
    }

    public function StoreSound(Request $request){
        // 修正验证规则字段名，添加文件类型限制
        $request->validate([
            'so_name' => 'required|max:200',
            'so_file' => 'required|file|mimes:mp3,wav,ogg|max:10240',
            'caty' => 'required'
        ]);

        $file = $request->file("so_file");
        $filename = date('YmdHi').$file->getClientOriginalName();
        
        // 确保上传目录存在
        $uploadPath = public_path('upload/sound_files/');
        if(!file_exists($uploadPath)){
            mkdir($uploadPath, 0755, true);
        }
        
        $move = $file->move($uploadPath, $filename);

        if($move){
            $sound = new Sound();
            $sound->name = $request->input('so_name');
            $sound->type = $request->input('caty');
            $sound->music = $filename;

            $sound->save();
            $notification = array(
                'message' => 'Sound saved Successfully',
                'alert-type' => 'success'
            );
            return redirect()->route('all.sound')->with($notification);
        }else{
            $notification = array(
                'message' => 'Sound not moved !',
                'alert-type' => 'error'
            );
            return redirect()->route('all.sound')->with($notification);
        }
    }
}

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