前端文件上传

前端文件上传通常使用HTML表单和JavaScript实现。以下是基本流程：

创建一个HTML表单，包含一个文件选择输入框和一个提交按钮。

<form>
  <input type="file" id="myFile">
  <button type="submit" onclick="uploadFile()">上传</button>
</form>

创建一个JavaScript函数，用于处理表单提交事件，获取选中的文件并将其上传到服务器。

function uploadFile() {
  const selectedFile = document.getElementById('myFile').files[0];
  const formData = new FormData();
  formData.append('file', selectedFile);

  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('上传成功！', data);
  })
  .catch(error => {
    console.error('上传失败！', error);
  });
}

在服务器端编写代码，接收上传的文件并将其保存到指定位置。

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

app.post('/upload', upload.single('file'), (req, res) => {
  console.log('文件已上传：', req.file);
  res.json({ message: '上传成功！' });
});

app.listen(3000, () => {
  console.log('服务器已启动：<http://localhost:3000>');
});

以上是一个基本的前端文件上传流程，可以根据实际需求进行修改和扩展。注意要确保上传的文件类型和大小符合要求，并对上传的文件进行安全性检查和处理。

简单文件上传

前端文件上传