前端上传图片到后端数据库

前端上传图片到后端数据库通常涉及以下几个步骤：

1. **HTML 表单**: 使用 HTML 创建一个表单，包含 `input` 元素，type 设置为 "file"，用户可以选择本地图片文件。

<form action="/upload" enctype="multipart/form-data">
  <input type="file" name="image" accept=".jpg, .jpeg, .png" />
  <input type="submit" value="上传">
</form>

这里的 `enctype="multipart/form-data"` 是必需的，因为它允许发送二进制数据，如图片文件。

2. **JavaScript (optional)**: 可以使用 JavaScript 来增强用户体验，例如预览图片、限制文件大小等。这通常通过 `FileReader API` 实现。

3. **AJAX 或 Fetch**: 当用户点击提交按钮，前端可以使用 AJAX 发送异步请求，将选中的图片文件作为 form 数据的一部分发送到服务器。或者，可以使用现代浏览器支持的 Fetch API 进行请求。

const formData = new FormData();
formData.append('image', fileInput.files[0]);

fetch('/upload', {
  method: 'POST',
  body: formData,
})
.then(response => response.json())
.then(data => console.log('Upload successful:', data))
.catch(error => console.error('Error:', error));

4. **后端处理**:
- 后端接收请求后，检查文件是否合法（比如大小、类型），然后保存到服务器文件系统（如硬盘）。
- 如果使用的是关系型数据库（如 MySQL、PostgreSQL），可能会将图片路径存储在数据库字段中，而不是直接存图片；如果是 NoSQL 数据库（如 MongoDB），则可以直接存储二进制数据。
- 返回响应给前端，告知上传状态。