next.js 通过 api 路由上传文件/强大 - 不工作
next.js file upload via api routes / formidable - not working
我很难通过 api 路由上传文件。
在客户端我是这样提交文件的:
onFormSubmit = (e) => {
e.preventDefault() // Stop form submit
this.fileUpload(this.state.file).then((response) => {
console.log('rD', response.data)
})
}
onFileChange = (e) => {
this.setState({ file: e.target.files[0] })
}
fileUpload = (file) => {
const url = '/api/mail/upload'
const formData = new FormData()
formData.append('file', file)
const config = {
headers: {
'X-CSRF-TOKEN': this.props.session.csrfToken
}
}
return axios.post(url, formData, config)
}
我对 /api/mail/upload
的请求是这样的:
Request Headers:
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,de-DE;q=0.8,de;q=0.7
Connection: keep-alive
Content-Length: 1331
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryBlNt6z8t4rGZT0x6
Cookie: abc123
Host: localhost:3000
Origin: http://localhost:3000
Referer: http://localhost:3000/new
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36
X-CSRF-TOKEN: abc123
Form Data:
file: (binary)
然后在路由中 (/api/mail/upload) 我尝试使用 formidable 来解析表单数据,最后对文件做一些事情。
我已通过在 api 路由文件底部包含以下内容来确保禁用内置正文解析器:
export const config = {
api: {
bodyParser: false
}
}
^^ 这是正确的做法,对吧?
最后,在 api 路线中,我尝试了很多不同的东西,但目前以下是我期望的工作,但它不是..
module.exports = async (req, res) => {
const form = new formidable.IncomingForm()
form.parse(req, (err, fields, files) => {
if (err) return reject(err)
console.log(fields, files)
res.status(200).json({ fields, files })
})
// if I console.log(form) here - I can see the request details, so it seems to be picking that up
}
这不会在服务器端或客户端生成任何输出,我希望 console.log(fields, files)
在服务器端输出文件名等。
有人知道我错过了什么吗?
我相信,如果您在端点内部执行异步操作,那么 next.js 希望您 return 做出承诺,例如
export default (req, res) => {
const promise = new Promise((resolve, reject) => {
const form = new formidable.IncomingForm();
form.parse(req, (err, fields, files) => {
if (err) reject(err);
resolve({fields, files});
})
})
return promise.then(({fields, files}) => {
res.status(200).json({ fields, files })
})
}
我 100% 确定您的问题是由混合使用 CommonJS 导出(即 module.exports =
)和 ES6 模块语法(export const config = ...
)引起的。
当您执行此操作时,NextJS 只会看到默认导出,而不会看到您的配置声明,因此会继续解析正文。这反过来导致 req
在传递给 formidable
时已经完成。
除此之外,您的代码中的一切看起来都是正确的。通过改变
module.exports = async (req, res) => {
到
export default async (req, res) => {
你应该得到预期的行为。
您只需要禁用 Next.js 内置正文解析器:https://nextjs.org/docs/api-routes/api-middlewares#custom-config
以下是工作示例:
// Backend
import formidable from 'formidable';
export const config = {
api: {
bodyParser: false,
},
};
export default async (req, res) => {
const form = new formidable.IncomingForm();
form.uploadDir = "./";
form.keepExtensions = true;
form.parse(req, (err, fields, files) => {
console.log(err, fields, files);
});
};
https://gist.github.com/agmm/da47a027f3d73870020a5102388dd820
您可以按照下面解释的简单方式实现它->
以简单的方式从客户端发送文件将是 ->
客户端->
const file = e.target.files[0];
const formData = new FormData();
formData.append("file", file);
const { data } = await axios.post("/api/upload",formData)
在后端安装 express-formidable
后端 api 将是 ->
import express from 'express';
import expressAsyncHandler from 'express-async-handler';
import formidable from 'express-formidable';
const router = express.Router();
export const config = {
api: {
bodyParser: false,
},
};
export default router.post('/upload',formidable() ,expressAsyncHandler(async (req, res) => {
const {file} = req.files;
console.log(file);
// here you can handle the incoming file to send it to cloud
}));
express-formidable 将处理所有传入流并通过将所有数据存储到 'data' 变量来为我们提供数据。为了将它存储到任何云(aws s3,cloudinary),创建一个可读流并将其附加到形成数据然后发送它。
我很难通过 api 路由上传文件。
在客户端我是这样提交文件的:
onFormSubmit = (e) => {
e.preventDefault() // Stop form submit
this.fileUpload(this.state.file).then((response) => {
console.log('rD', response.data)
})
}
onFileChange = (e) => {
this.setState({ file: e.target.files[0] })
}
fileUpload = (file) => {
const url = '/api/mail/upload'
const formData = new FormData()
formData.append('file', file)
const config = {
headers: {
'X-CSRF-TOKEN': this.props.session.csrfToken
}
}
return axios.post(url, formData, config)
}
我对 /api/mail/upload
的请求是这样的:
Request Headers:
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,de-DE;q=0.8,de;q=0.7
Connection: keep-alive
Content-Length: 1331
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryBlNt6z8t4rGZT0x6
Cookie: abc123
Host: localhost:3000
Origin: http://localhost:3000
Referer: http://localhost:3000/new
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36
X-CSRF-TOKEN: abc123
Form Data:
file: (binary)
然后在路由中 (/api/mail/upload) 我尝试使用 formidable 来解析表单数据,最后对文件做一些事情。
我已通过在 api 路由文件底部包含以下内容来确保禁用内置正文解析器:
export const config = {
api: {
bodyParser: false
}
}
^^ 这是正确的做法,对吧?
最后,在 api 路线中,我尝试了很多不同的东西,但目前以下是我期望的工作,但它不是..
module.exports = async (req, res) => {
const form = new formidable.IncomingForm()
form.parse(req, (err, fields, files) => {
if (err) return reject(err)
console.log(fields, files)
res.status(200).json({ fields, files })
})
// if I console.log(form) here - I can see the request details, so it seems to be picking that up
}
这不会在服务器端或客户端生成任何输出,我希望 console.log(fields, files)
在服务器端输出文件名等。
有人知道我错过了什么吗?
我相信,如果您在端点内部执行异步操作,那么 next.js 希望您 return 做出承诺,例如
export default (req, res) => {
const promise = new Promise((resolve, reject) => {
const form = new formidable.IncomingForm();
form.parse(req, (err, fields, files) => {
if (err) reject(err);
resolve({fields, files});
})
})
return promise.then(({fields, files}) => {
res.status(200).json({ fields, files })
})
}
我 100% 确定您的问题是由混合使用 CommonJS 导出(即 module.exports =
)和 ES6 模块语法(export const config = ...
)引起的。
当您执行此操作时,NextJS 只会看到默认导出,而不会看到您的配置声明,因此会继续解析正文。这反过来导致 req
在传递给 formidable
时已经完成。
除此之外,您的代码中的一切看起来都是正确的。通过改变
module.exports = async (req, res) => {
到
export default async (req, res) => {
你应该得到预期的行为。
您只需要禁用 Next.js 内置正文解析器:https://nextjs.org/docs/api-routes/api-middlewares#custom-config
以下是工作示例:
// Backend
import formidable from 'formidable';
export const config = {
api: {
bodyParser: false,
},
};
export default async (req, res) => {
const form = new formidable.IncomingForm();
form.uploadDir = "./";
form.keepExtensions = true;
form.parse(req, (err, fields, files) => {
console.log(err, fields, files);
});
};
https://gist.github.com/agmm/da47a027f3d73870020a5102388dd820
您可以按照下面解释的简单方式实现它->
以简单的方式从客户端发送文件将是 ->
客户端->
const file = e.target.files[0];
const formData = new FormData();
formData.append("file", file);
const { data } = await axios.post("/api/upload",formData)
在后端安装 express-formidable
后端 api 将是 ->
import express from 'express';
import expressAsyncHandler from 'express-async-handler';
import formidable from 'express-formidable';
const router = express.Router();
export const config = {
api: {
bodyParser: false,
},
};
export default router.post('/upload',formidable() ,expressAsyncHandler(async (req, res) => {
const {file} = req.files;
console.log(file);
// here you can handle the incoming file to send it to cloud
}));
express-formidable 将处理所有传入流并通过将所有数据存储到 'data' 变量来为我们提供数据。为了将它存储到任何云(aws s3,cloudinary),创建一个可读流并将其附加到形成数据然后发送它。