文件上传处理
实现文件上传功能
提示词
请实现文件上传功能:
需求:
- 文件类型:[图片/文档/视频]
- 大小限制:[如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
更多
登录后可点赞、收藏、评论和举报。
还没有评论,先发起一个具体问题。