首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从ExpressJs向React发送文件

可以通过以下步骤实现:

  1. 在ExpressJs中,首先需要安装并引入multer中间件,用于处理文件上传。可以使用以下命令安装multer:
代码语言:txt
复制
npm install multer

然后在ExpressJs的代码中引入multer:

代码语言:txt
复制
const multer = require('multer');
  1. 创建一个multer实例,并配置文件上传的目标路径和文件名。可以使用以下代码创建multer实例:
代码语言:txt
复制
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/'); // 指定文件上传的目标路径
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname); // 指定文件上传后的文件名
  }
});

const upload = multer({ storage: storage });
  1. 在ExpressJs的路由中使用multer中间件处理文件上传。可以使用以下代码将文件上传的路由与multer中间件关联起来:
代码语言:txt
复制
app.post('/upload', upload.single('file'), function (req, res, next) {
  // 文件上传成功后的处理逻辑
});

其中,upload.single('file')表示只处理名为file的文件上传。

  1. 在React中,可以使用fetchaxios等库发送POST请求,将文件上传到ExpressJs服务器。可以使用以下代码实现文件上传:
代码语言:txt
复制
const fileInput = document.querySelector('input[type="file"]');
const formData = new FormData();

formData.append('file', fileInput.files[0]);

fetch('/upload', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => {
  // 文件上传成功后的处理逻辑
})
.catch(error => {
  // 文件上传失败后的处理逻辑
});

其中,/upload是ExpressJs服务器的文件上传路由。

总结: 通过以上步骤,可以实现从ExpressJs向React发送文件的功能。在ExpressJs中使用multer中间件处理文件上传,然后在React中使用fetchaxios等库发送POST请求将文件上传到ExpressJs服务器。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 领券