Scala Play-Bootstrap表单中移除已上传文件的实现方案

我之前在做Play项目的时候也遇到过一模一样的问题——Play的b3表单组件确实没内置移除已上传文件的功能，不过咱们可以通过前端JS配合后端的状态判断来搞定，下面是我亲测有效的方案：

第一步：修改前端表单结构 #

首先要给文件上传控件添加上移除按钮，同时加一个隐藏字段用来标记用户是否要删除已有的文件（针对编辑场景，比如用户之前已经上传过头像，现在想删掉）。修改后的表单代码如下：

@b3.form(routes.SettingsController.submitEditProfile, 'enctype -> "multipart/form-data") {
  @CSRF.formField
  
  <!-- 文件上传控件 -->
  <div class="form-group">
    @b3.label("profilePicture", "Profile Picture", '_class -> "control-label")
    <div class="input-group">
      @b3.file("profilePicture", '_class -> "form-control")
      <button type="button" id="removeFileBtn" style="display:none;" class="btn btn-danger">移除文件</button>
    </div>
  </div>
  
  <!-- 隐藏字段：标记是否删除已有文件 -->
  <input type="hidden" id="deleteExistingFile" name="deleteExistingFile" value="false">
  
  <!-- 其他表单字段 -->
  @b3.text("username", '_label -> "Username", 'value -> currentUser.username)
  
  @b3.submit('class -> "btn btn-primary"){ 提交修改 }
}

第二步：添加前端JS交互逻辑 #

接下来要写JS代码，实现「选中文件后显示移除按钮」「点击移除按钮清空文件输入并标记删除状态」的功能：

// 获取页面元素
const fileInput = document.querySelector('input[name="profilePicture"]');
const removeBtn = document.getElementById('removeFileBtn');
const deleteHiddenInput = document.getElementById('deleteExistingFile');

// 监听文件选择事件：选中文件时显示移除按钮
fileInput.addEventListener('change', function() {
  if (this.files.length > 0) {
    removeBtn.style.display = 'inline-block';
    // 选了新文件就不需要删除原有文件了，重置标记
    deleteHiddenInput.value = 'false';
  } else {
    removeBtn.style.display = 'none';
  }
});

// 移除按钮点击事件：清空文件输入，隐藏按钮，标记删除状态
removeBtn.addEventListener('click', function() {
  // 清空文件输入（这里用value=''是兼容大部分浏览器的方式）
  fileInput.value = '';
  // 隐藏移除按钮
  this.style.display = 'none';
  // 标记要删除已有的文件
  deleteHiddenInput.value = 'true';
});

第三步：后端处理逻辑 #

最后在你的SettingsController里处理表单提交，根据前端传来的标记和文件数据，分别处理「上传新文件」「删除原有文件」「不修改文件」三种情况：

import play.api.mvc.{Action, ControllerComponents, MultipartFormData}
import javax.inject.Inject

class SettingsController @Inject()(cc: ControllerComponents, userRepo: UserRepository) extends AbstractController(cc) {
  
  // 假设你有处理文件存储的工具方法
  private def saveFileToStorage(file: MultipartFormData.FilePart[Array[Byte]]): String = {
    // 这里实现你的文件存储逻辑：比如存到本地目录、云存储等
    // 返回存储后的文件路径/标识
    val fileName = s"profile_${System.currentTimeMillis()}_${file.filename}"
    // 示例：写入本地文件
    java.nio.file.Files.write(java.nio.file.Paths.get(s"/uploads/$fileName"), file.ref)
    s"/uploads/$fileName"
  }

  private def deleteFileFromStorage(filePath: String): Unit = {
    // 实现删除文件的逻辑
    java.nio.file.Files.deleteIfExists(java.nio.file.Paths.get(filePath))
  }

  def submitEditProfile = Action(parse.multipartFormData) { implicit request =>
    // 获取前端传来的删除标记
    val shouldDeleteExisting = request.body.dataParts
      .get("deleteExistingFile")
      .exists(_.head == "true")
    
    // 获取上传的文件
    val uploadedFileOpt = request.body.file("profilePicture")
    
    // 获取当前登录用户（这里假设你有获取当前用户的方法）
    val currentUser = userRepo.getCurrentUser(request)
    
    // 根据不同情况处理用户信息
    val updatedUser = (shouldDeleteExisting, uploadedFileOpt) match {
      case (true, _) =>
        // 情况1：用户点击了移除，要删除原有文件
        currentUser.profilePicture.foreach(deleteFileFromStorage)
        currentUser.copy(profilePicture = None)
      
      case (false, Some(file)) =>
        // 情况2：用户上传了新文件，先删旧的再存新的
        currentUser.profilePicture.foreach(deleteFileFromStorage)
        val newFilePath = saveFileToStorage(file)
        currentUser.copy(profilePicture = Some(newFilePath))
      
      case (false, None) =>
        // 情况3：用户没碰文件控件，不修改文件
        currentUser
    }
    
    // 保存更新后的用户到数据库
    userRepo.update(updatedUser)
    
    // 重定向回编辑页面并提示成功
    Redirect(routes.SettingsController.editProfile())
      .flashing("success" -> "个人资料更新成功")
  }
}

额外说明 #

• 如果是新增表单（不是编辑场景，不存在已有文件），那可以去掉deleteExistingFile这个隐藏字段，只保留清空文件输入的逻辑就行
• 文件存储的方法（saveFileToStorage和deleteFileFromStorage）要根据你实际的存储方案来实现，比如用AWS S3的话就调用S3的SDK方法
• 样式可以根据你的项目UI调整，比如把移除按钮和文件输入框放在同一行，或者调整按钮的颜色、大小

内容的提问来源于stack exchange，提问作者edev.io