记录关于node接收并解析前端上传excel文件formData踩的坑

1.vue2使用插件formidable实现接收文件,首先接口不可以使用任何中间件,否则form.parse()方法不执行。

const express = require('express')
const multipart = require('connect-multiparty');
const testController = require('../controller/testController')

//用于解析post请求body里的参数
let multipartMiddleware = multipart();

 
const router = express.Router()

router.get('/demo', testController.testDemo)
//不可以使用任何中间件,否则form.parser方法将不执行
router.post('/uploadFile', testController.testGetFile)

module.exports = router
const testService = require("../service/testService")
const formidable = require('formidable')
const path = require("path")

const testController = {
    testDemo: (req, res, next) => {
        testService.queryTest(req, res, next)
    },
    testGetFile: (req, res, next) => {
        console.log(req.body);
        const form = new formidable.IncomingForm()
        form.uploadDir = path.join(__dirname, "../", "public", "uploads");
        // 保留上传文件的后缀名字
        form.keepExtensions = true
        form.parse(req, function (err, fields, files) { //使用中间件,方法不执行
            console.log(files); 
        })

        res.send('获得文件')
    },
}

module.exports = testController

2.注意版本,vue2 和 vue3 使用的formidable版本不同,一定不可以下载错,否则就会报错。我这里使用的是express,版本2没有问题,版本3会报错。

# v2
npm install formidable@v2

# v3
npm install formidable
npm install formidable@v3

3.前端使用formData,一定要保证传给后端的数据为二进制数据,否则传的数据会出现在fields表单的数据里。

尤其要注意formData对象进行append,下面写法有问题,会造成下面的情况,传给后端是非二进制流。这种情况下,文件不会出现在files里,反而会出现在fields里。

async submit() {
            const file = this.fileList[0]
            const formData = new FormData()
            formData.append('file',file) //这里直接传入file会有问题
            
            uploadFile(formData,{
                headers:{
                    'Content-Type': 'multipart/form-data'
                }
            }).then(res => {

                console.log(res);
            })
        }

 

 正确写法:

formData.append('file',file.raw)

  • 10
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Node.js Koa 框架中,解析文件上传formData 通常使用 koa-body 或 koa-multer 中间件。 1. koa-body 中间件 koa-body 是 Node.js 的一个中间件,用于解析 HTTP 请求体中的数据,支持多种类型的数据格式,包括 JSON、form 和 text 等,还支持 multipart 类型的数据,也就是文件上传时的 formData。 使用 koa-body 中间件解析 formData,需要设置 multipart 参数为 true,如下所示: ```javascript const Koa = require('koa'); const koaBody = require('koa-body'); const app = new Koa(); app.use(koaBody({ multipart: true, })); app.use(async (ctx) => { const file = ctx.request.files.file; console.log(file.name); // 输出上传文件名 }); app.listen(3000); ``` 2. koa-multer 中间件 koa-multer 是 Node.js 的一个中间件,用于处理文件上传,它支持多种文件上传方式,包括普通上传、多文件上传等。与 koa-body 不同,koa-multer 只处理文件上传,不处理其他类型的请求体数据。 使用 koa-multer 中间件解析 formData,需要先创建一个 multer 实例,然后使用该实例的 single 或 array 方法来处理文件上传,如下所示: ```javascript const Koa = require('koa'); const Router = require('koa-router'); const multer = require('@koa/multer'); const app = new Koa(); const router = new Router(); // 创建 multer 实例 const upload = multer({dest: 'uploads/'}); // 处理单个文件上传 router.post('/upload', upload.single('file'), async (ctx, next) => { console.log(ctx.req.file); // 输出上传文件信息 }); // 处理多个文件上传 router.post('/uploads', upload.array('files', 10), async (ctx, next) => { console.log(ctx.req.files); // 输出上传文件信息 }); app.use(router.routes()); app.listen(3000); ``` 在上面的示例中,创建了一个 multer 实例,然后使用该实例的 single 和 array 方法来处理单个文件上传和多个文件上传。在处理上传文件时,需要指定上传文件的字段名,例如 single 方法中的 'file',array 方法中的 'files'。 综上所述,使用 koa-body 或 koa-multer 中间件都可以解析文件上传formData。其中,koa-body 可以处理不同类型的请求体数据,而 koa-multer 则更加专注于文件上传。开发者可以根据自己的需求选择合适的中间件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Goat恶霸詹姆斯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值