HTML 上传文件事件：前端与后端处理方法

在 HTML 中，可以使用 <input> 标签的 type='file' 属性来创建一个上传文件的表单元素。一般情况下，上传文件的表单会包含一个提交按钮，用户选择完文件后点击提交按钮，触发表单的提交事件，将文件数据传送到服务器进行处理。

上传文件事件的处理方式有两种：

前端处理：通过 JavaScript 监听文件上传表单的 change 事件，获取用户选择的文件，将文件数据以 FormData 的形式发送到服务器。

<form>
  <input type='file' id='uploadFile'>
  <button type='submit'>提交</button>
</form>

<script>
  const form = document.querySelector('form');
  const uploadFile = document.querySelector('#uploadFile');

  form.addEventListener('submit', (e) => {
    e.preventDefault(); // 阻止表单默认提交行为

    // 获取用户选择的文件
    const file = uploadFile.files[0];

    // 创建 FormData 对象，保存文件数据
    const formData = new FormData();
    formData.append('file', file);

    // 发送文件数据到服务器
    fetch('/upload', {
      method: 'POST',
      body: formData
    }).then(response => {
      console.log('上传成功');
    }).catch(error => {
      console.log('上传失败');
    });
  });
</script>

后端处理：通过表单的 enctype='multipart/form-data' 属性，将表单数据以二进制流的形式发送到服务器，服务器通过解析请求体，获取上传的文件数据进行处理。

<form action='/upload' method='POST' enctype='multipart/form-data'>
  <input type='file' name='file'>
  <button type='submit'>提交</button>
</form>

后端代码示例（Node.js + Express）：

const express = require('express');
const app = express();
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  // req.file 保存上传的文件信息
  console.log(req.file);

  // 处理上传的文件数据

  res.send('上传成功');
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});