如何检查HTML表单提交文件状态及Node.js请求中文件是否存在？

一、HTML表单提交时检查是否已上传文件 #

要在表单提交前校验用户是否选择了文件，用JavaScript监听表单的提交事件即可：

1. 先给表单和文件输入框添加ID，方便获取元素：

<form action="/addPost" enctype="multipart/form-data" method="POST" class="createPostForm" id="blogPostForm">
  <div>
    <label for="AddImage">博客配图：</label>
    <input type="file" name="blogImage" id="blogImageInput"><br>
  </div>
  <input type="submit" value="发布文章">
</form>

2. 添加上提交校验的脚本：

document.getElementById('blogPostForm').addEventListener('submit', function(e) {
  const fileInput = document.getElementById('blogImageInput');
  // 如果没选任何文件，阻止提交并提示
  if (fileInput.files.length === 0) {
    e.preventDefault();
    alert('请选择要上传的图片');
  }
});

要是允许用户不上传文件直接提交，删掉e.preventDefault()和提示逻辑即可，完全根据需求调整。

二、Node.js接口中判断请求里是否存在文件名 #

原来的代码直接取req.file.filename会报错，因为没上传文件时req.file是undefined。只要先判断req.file是否存在，再决定要不要添加图片名字段就行：

修改后的接口代码：

app.post('/addPost', upload.single('blogImage'), (req, res) => {
  let data = req.body;
  // 只有上传了文件，才把文件名加到数据里
  if (req.file) {
    data.blogImageName = req.file.filename;
  }
  console.log(data);
  postContent(data); // 这里要传处理后的data，不是原始的req.body
});

这样即使没传文件，接口也不会报错，data对象中也不会多出blogImageName字段，正好符合需求。

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