koa-bodyparser中ctx.request.body获取不到post的值

可能原因:1.bodyParser中间件放在路由前面了

                  2.post请求的请求头没设置(如图三)

 

 

 

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为了实现前后端上传文件生成url,需要先创建一个前端页面,用于上传文件并显示上传文件的url。以下是一个简单的示例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>上传文件</title> </head> <body> <input type="file" id="fileInput" /> <button onclick="uploadFile()">上传文件</button> <br /><br /> <div id="fileUrl"></div> <script> function uploadFile() { const file = document.getElementById('fileInput').files[0]; const formData = new FormData(); formData.append('file', file); fetch('/upload', { method: 'POST', body: formData }) .then((res) => res.json()) .then((data) => { document.getElementById('fileUrl').innerHTML = `文件上传成功,url为: ${data.data.url}`; }) .catch((err) => { console.error(err); }); } </script> </body> </html> ``` 这是一个简单的上传文件的页面,包含一个文件选择框和一个上传按钮,当用户选择完文件并点击上传按钮后,会向服务器发送上传文件的请求,服务器返回上传文件对应的url,并在页面上显示该url。 接下来,需要在服务器端实现文件上传和生成url。可以使用koakoa-body这两个依赖包来实现。以下是一个简单的示例: ```javascript const Koa = require('koa'); const koaBody = require('koa-body'); const { createWriteStream } = require('fs'); const { createObjectURL } = require('url'); const app = new Koa(); // 设置上传文件的存储路径 const uploadPath = './public/uploads/'; // 设置上传文件的最大大小为10MB app.use(koaBody({ multipart: true, formidable: { maxFileSize: 10 * 1024 * 1024 } })); // 处理文件上传请求 app.use(async (ctx) => { // 上传的文件对象 const file = ctx.request.files.file; // 文件保存的路径 const filePath = uploadPath + file.name; // 创建可写流 const stream = createWriteStream(filePath); // 写入文件 await new Promise((resolve, reject) => { stream.on('finish', resolve); stream.on('error', reject); file.pipe(stream); }); // 生成文件的url const fileUrl = createObjectURL(file); // 返回文件的url ctx.body = { status: 'success', data: { url: fileUrl, }, }; }); // 启动服务器 app.listen(3000, () => { console.log('Server is running at http://localhost:3000'); }); ``` 这段代码实现了一个简单的文件上传功能,将上传的文件保存到本地的指定路径,并且返回上传文件对应的url。在前端页面上传文件后,会向服务器发送上传文件的请求,服务器处理请求并返回上传文件对应的url,前端页面收到响应后,将上传文件的url显示在页面上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值