Laravel编辑记录时如何在模态框中展示已上传的图片

核心问题说明 #

1. 浏览器出于安全限制，禁止JS直接给type="file"的输入框赋值，你原来写的$('#image').val(data.image)完全无效
2. 模态框内没有预留原有图片的展示区域，自然无法显示已上传的图片
3. 当前文件上传框加了required属性，编辑时如果用户不重新上传图片，表单根本无法提交，属于功能bug需要优先修改

第一步：修改模态框HTML代码 #

找到卡片图片对应的表单组，增加原有图片展示区域，同时去掉文件输入框的required限制：

<div class="modal-body">
  <form method="POST" id="memberCardForm" name="memberCardForm" class="form-horizontal" enctype="multipart/form-data">

    @csrf
    <input type="hidden" name="id" id="id">
    <div class="form-group">
      <label for="">Card Type</label>
      <div class="col-sm-12">
        <input type="text" class="form-control" id="card_type" name="card_type" maxlength="50" required>
      </div>
    </div>

    <div class="form-group">
      <label for="">Description</label>
      <div class="col-sm-12">
        <input type="text" class="form-control" id="card_desc" name="card_desc" maxlength="50" required>
      </div>
    </div>

    <div class="form-group">
      <label for="">Entitlement</label>
      <div class="col-sm-12">
        <input type="text" class="form-control" id="card_entitlement" name="card_entitlement" maxlength="50">
      </div>
    </div>

    <div class="form-group">
      <label for="">Card Image</label>
      <div class="col-sm-12">
        <!-- 新增原有图片展示容器 -->
        <div id="current_image_container" class="mb-2"></div>
        <!-- 去掉required属性 -->
        <input type="file" class="form-control" id="image" name="image">
      </div>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn btn-danger" data-dismiss="modal">Close</a>
      <button type="submit" id="saveBtn" class="btn btn-success">Save</button>
    </div>
  </form>
</div>

第二步：修改编辑触发的JS代码 #

删掉原来给file input赋值的无效代码，新增原有图片的渲染逻辑：

//Edit
$('body').on('click', '.editRecord', function() {
  var id = $(this).data('id');
  $.get("{{ url('membercards/edit') }}" + '/' + id, function(data) {
    $('#exampleModalLabel').html("Edit Member Card");
    $('#saveBtn').html('Save');
    $('#exampleModal').modal('show');
    $('#id').val(data.id);
    $('#card_type').val(data.card_type);
    $('#card_desc').val(data.card_desc);
    $('#card_entitlement').val(data.card_entitlement);
    // 删掉原来无效的给file输入框赋值的代码，新增图片渲染逻辑
    // 路径根据你实际存储位置调整，如果存在public/storage下可以直接用以下写法
    $('#current_image_container').html(`
      <p class="mb-1">当前已上传图片：</p>
      <img src="${asset('storage/' + data.image)}" alt="卡片图片" style="max-width: 200px; max-height: 200px; object-fit: contain;">
      <p class="text-muted mt-1 small">如不重新上传新图片，将保留原有图片</p>
    `);
  })
});

提示：如果你的JS代码写在独立的.js文件中无法直接使用blade的asset函数，可以先在父级blade模板中定义全局基础路径<script>const ASSET_URL = "{{ asset('') }}";</script>，再在JS中拼接路径${ASSET_URL}storage/${data.image}即可。

第三步：修改后端Laravel控制器更新逻辑 #

编辑时要判断用户是否上传了新图片，没有的话就保留原有图片路径，不要覆盖为空：

public function update(Request $request, $id)
{
    $memberCard = \App\Models\MemberCard::findOrFail($id);
    // 验证规则里image改成nullable可选
    $validated = $request->validate([
        'card_type' => 'required|max:50',
        'card_desc' => 'required|max:50',
        'card_entitlement' => 'max:50',
        'image' => 'nullable|image|max:2048'
    ]);

    // 只有上传了新图片才处理存储逻辑
    if ($request->hasFile('image')) {
        // 替换为你自己的图片存储逻辑
        $path = $request->file('image')->store('membercards', 'public');
        $validated['image'] = $path;
        // 可选：删除旧图片节约存储空间
        \Storage::disk('public')->delete($memberCard->image);
    }

    $memberCard->update($validated);
    // 保留你原来的返回逻辑即可
    return response()->json($memberCard);
}

提示：如果还没配置storage软链接，需要先执行命令php artisan storage:link才能正常访问public/storage下的图片。

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