文件上传处理

实现文件上传功能

提示词

请实现文件上传功能:

需求:
- 文件类型:[图片/文档/视频]
- 大小限制:[如5MB]
- 存储:[本地/S3/OSS]
- 功能:多文件上传、进度条、预览、删除

要求:
1. 前端上传组件(拖拽+点击)
2. 文件类型和大小验证
3. 后端接收和存储
4. 图片压缩(如需要)
5. 安全检查(病毒扫描、文件名处理)
6. 上传进度显示

示例输出

前端(React + axios):

function FileUploader() {
  const [files, setFiles] = useState<File[]>([]);
  const [progress, setProgress] = useState(0);

  const handleUpload = async () => {
    const formData = new FormData();
    files.forEach(f => formData.append('files', f));
    
    await axios.post('/api/upload', formData, {
      onUploadProgress: (e) => {
        setProgress(Math.round((e.loaded * 100) / e.total));
      }
    });
  };

  return (
    <div>
      <input type="file" multiple accept="image/*" onChange={...} />
      {progress > 0 && <progress value={progress} max="100" />}
    </div>
  );
}

后端(Node.js + multer + S3):

const upload = multer({
  storage: multerS3({ s3, bucket: 'uploads' }),
  limits: { fileSize: 5 * 1024 * 1024 },
  fileFilter: (req, file, cb) => {
    if (file.mimetype.startsWith('image/')) cb(null, true);
    else cb(new Error('只允许图片'));
  }
});
0

评论 0

更多

登录后可点赞、收藏、评论和举报。

还没有评论,先发起一个具体问题。