node(multer)上传文件

node(multer)上传文件

from表单上传文件

前端代码

html 复制代码
import React from 'react';
import { Form, Button, Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import axios from 'axios';

const FileUploadForm = () => {
  const onFinish = async (values) => {
    const formData = new FormData();
    const file = values.file[0].originFileObj;  // 获取文件

    formData.append('file', file);

    try {
      const response = await axios.post('http://localhost:5000/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
      message.success('文件上传成功');
    } catch (error) {
      message.error('文件上传失败');
    }
  };

  return (
    <Form onFinish={onFinish}>
      <Form.Item
        name="file"
        label="上传文件"
        rules={[{ required: true, message: '请选择一个文件!' }]}
      >
        <Upload
          beforeUpload={() => false}  // 阻止自动上传,手动处理上传
          accept=".jpg,.png,.pdf,.docx,.txt"  // 设置文件类型限制
        >
          <Button icon={<UploadOutlined />}>选择文件</Button>
        </Upload>
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          上传
        </Button>
      </Form.Item>
    </Form>
  );
};

export default FileUploadForm;

后端代码

javascript 复制代码
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
const PORT = 5000;

// 配置 multer 存储选项
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/'); // 文件保存的目录
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + path.extname(file.originalname)); // 保证文件名唯一
  },
});

// 创建 multer 实例
const upload = multer({ storage: storage });

// 创建上传路由
app.post('/upload', upload.single('file'), (req, res) => {
  // 检查文件是否上传
  if (!req.file) {
    return res.status(400).send('没有文件上传');
  }

  res.status(200).send({
    message: '文件上传成功',
    file: req.file,
  });
});

// 设置静态目录,使得可以通过 URL 访问上传的文件
app.use('/uploads', express.static('uploads'));

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});
相关推荐
然我36 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子41 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台2 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹2 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_7 小时前
XSS(跨站脚本攻击)
前端·网络·xss