Laravel8中如何阻止TRIX编辑器附件未点击提交就提前上传至服务器

TRIX编辑器默认会在用户选择附件后立即触发上传，你需要禁用这个默认逻辑，暂存附件后随表单一起提交，具体修改步骤如下：

在open_file.blade.php文件的</body>标签前添加以下JS代码：

// 暂存trix附件的数组
let trixAttachments = [];
// 监听trix附件添加事件，阻止默认上传
document.addEventListener('trix-attachment-add', function (event) {
  const attachment = event.attachment;
  if (attachment.file) {
    // 把附件存到数组里，设置临时预览地址
    trixAttachments.push(attachment.file);
    const objectURL = URL.createObjectURL(attachment.file);
    attachment.setAttributes({
      url: objectURL,
      href: objectURL
    });
  }
});
// 监听表单提交事件，把附件加到表单数据里提交
document.querySelector('form').addEventListener('submit', function (e) {
  e.preventDefault();
  const formData = new FormData(this);
  // 把所有暂存的trix附件加到formData里
  trixAttachments.forEach((file, index) => {
    formData.append(`trix_files[${index}]`, file);
  });
  // 提交请求
  fetch(this.action, {
    method: this.method,
    body: formData,
    headers: {
      'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
    }
  }).then(res => {
    if(res.ok) window.location.reload()
    else alert('提交失败')
  });
});

你当前表单用的是GET方法，无法传输文件，需要修改form标签：

<!-- 把method改成POST，添加@method('PUT')适配资源路由的update方法 -->
<form method="POST" action="{{route('visitor.update', [auth()->user()->id])}}" enctype="multipart/form-data">
@csrf
@method('PUT')
<!-- 其余表单代码保持不变 -->

把附件上传逻辑合并到updates方法中，不需要单独的upload方法触发上传：

public function updates(Request $request)
{   
    // 验证附件（如果有上传的话）
    if($request->has('trix_files')) {
        $this->validate($request, [
            "trix_files.*" => "mimes:jpg,png,jpeg,gif,pdf|max:2000",
        ]);
        // 处理所有trix上传的附件
        $uploadedPaths = [];
        foreach ($request->file('trix_files') as $file) {
            $filenamewithextension = $file->getClientOriginalName();
            $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
            $extension = $file->getClientOriginalExtension();
            $filenametostore = $filename.'_'.time().'.'.$extension;
            $file->storeAs('uploads', $filenametostore);
            $path = asset('storage/uploads/'.$filenametostore);
            $uploadedPaths[] = $path;
            // 存入图片表
            DB::table('images')->insert([
                'image'=> $path
            ]);
        }
        // 如需把附件路径关联到用户数据，可放开下行代码自行调整
        // $request->merge(['trix_attachment_paths' => $uploadedPaths]);
    }
    $visitor = (new User)->updatesUser($request->all(), auth()->user()->id);
    return redirect()->back()->with('message', '文件更新成功!');
}

如果不需要单独的附件上传能力，可以删除web.php中的Route::post('upload', 'VisitorController@upload');路由。

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