问题
我想把下面的koa-router改造成require,module.exports形式
前端vue
<script>
export default {
data() {
return {
userAvator: "../../../static/avator.png",
userName: "",
userPhone: "",
userGender: "",
userType: ""
};
},
methods: {
getAvator(event) {
let avator = event.target.files[0];
if (avator.size > 100000) {
//不能大于100kb
return false;
}
console.log(avator);
let windowURL = window.URL;
this.userAvator = windowURL.createObjectURL(avator);
},
submit(event) {
if (
this.userName === "" ||
this.userPhone === "" ||
this.userGender === "" ||
this.userType === ""
) {
return false;
} else {
event.preventDefault();
let formData = new FormData();
let data = {
userName: this.userName,
userPhone: this.userPhone,
userGender: this.userGender,
userType: this.userType
};
data = JSON.stringify(data);
formData.append("avator", this.userAvator);
formData.append("data", data);
let config = {
headers: {
"Content-Type": "multipart/form-data"
}
};
axios
.post("http://localhost:3000/userInsertInto", formData, config)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
}
}
}
};
</script>
改造前
router.post('/userInsertInto', upload.single('file'), async(ctx, next) => {
//todo
})
改造后
router.post('/userInsertInto', controller.userInsertInto)
改造前,可以正常实现功能
const router = require('koa-router')();
const controller = require('../controller/user');
const multer = require('koa-multer');
var storage = multer.diskStorage({
//文件保存路径
destination: function(req, file, cb) {
cb(null, 'static/images/')
},
//修改文件名称
filename: function(req, file, cb) {
var fileFormat = (file.originalname).split(".");
cb(null, Date.now() + "." + fileFormat[fileFormat.length - 1]);
}
})
//加载配置
var upload = multer({ storage: storage });
router.post('/userInsertInto', upload.single('file'), async(ctx, next) => {
console.log(ctx.req.body)
let data = JSON.parse(ctx.req.body.data);
console.log(data);
ctx.body = {
msg: "aa"
}
})
module.exports = router;
改造后的require,module.exports 模式
require
const router = require('koa-router')();
const controller = require('../controller/user');
router.post('/userInsertInto', controller.userInsertInto)
module.exports = router;
module.exports
const router = require('koa-router')();
const userModel = require('../mysql/mysql');
const multer = require('koa-multer');
var storage = multer.diskStorage({
//文件保存路径
destination: function(req, file, cb) {
cb(null, 'static/images/')
},
//修改文件名称
filename: function(req, file, cb) {
var fileFormat = (file.originalname).split(".");
cb(null, Date.now() + "." + fileFormat[fileFormat.length - 1]);
}
})
//加载配置
var upload = multer({ storage: storage });
const userInsertInto = async (ctx) => {
await upload.single('file');
console.log(ctx.req.body)
let data = JSON.parse(ctx.req.body.data);
ctx.body = {
msg: "aa"
}
}
module.exports = {
userInsertInto: userInsertInto
}
报错
你改之后multer没解析request啊,所以body才为空,之前是作为中间件传入的,改后你得自己传request/response给multer。await upload.single(‘file’)(ctx.req,ctx.res); 试试。。。
来自✨ Node.js开源项目精选✨
@vendar 报了另一个错误
TypeError: Cannot read property 'headers' of undefined
at hasbody (D:\vue-koa-mysql\koa-server\node_modules\[email protected]@type-is\index.js:93:14)
at typeofrequest (D:\vue-koa-mysql\koa-server\node_modules\[email protected]@type-is\index.js:127:8)
at multerMiddleware (D:\vue-koa-mysql\koa-server\node_modules\[email protected]@multer\lib\make-middleware.js:18:10)
at Promise (D:\vue-koa-mysql\koa-server\node_modules\[email protected]@koa-multer\index.js:38:9)
at new Promise (<anonymous>)
at D:\vue-koa-mysql\koa-server\node_modules\[email protected]@koa-multer\index.js:37:14
at userInsertInto (D:\vue-koa-mysql\koa-server\controller\user.js:22:32)
at dispatch (D:\vue-koa-mysql\koa-server\node_modules\[email protected]@koa-compose\index.js:44:32)
at next (D:\vue-koa-mysql\koa-server\node_modules\[email protected]@koa-compose\index.js:45:18)
at D:\vue-koa-mysql\koa-server\node_modules\[email protected]@koa-router\lib\router.js:346:16
随便手写的,const upload = upload.single(‘file’); await upload(req,res); multer文档参考下。
来自✨ Node.js开源项目精选✨
如果 multer 不支持async,那你就不能await了,得用callback,自己验证一下
来自✨ Node.js开源项目精选✨
@vendar 去掉async await之后,还是报错了
undefined
(node:12316) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: Cannot read property 'headers' of undefined
(node:12316) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process
with a non-zero exit code.
怎么写的?文档里有说明的
来自✨ Node.js开源项目精选✨
@vendar 直接router.post后面接multer是可以接收到前端传过来的图片信息和表单数据的
router.post('/userInsertInto', upload.single('file'), async(ctx, next) => {
//todo
})
router(require)
const router = require('koa-router')();
const controller = require('../controller/user');
router.post('/userInsertInto', controller.userInsertInto)
module.exports = router;
user.js(module.exports)
const router = require('koa-router')();
const userModel = require('../mysql/mysql');
const multer = require('koa-multer');
const userInsertInto = (ctx) => {
var storage = multer.diskStorage({
//文件保存路径
destination: function(req, file, cb) {
cb(null, '/static/images/')
},
//修改文件名称
filename: function(req, file, cb) {
var fileFormat = (file.originalname).split(".");
cb(null, Date.now() + "." + fileFormat[fileFormat.length - 1]);
}
})
//加载配置
var upload = multer({ storage: storage });
// upload.single('file')(ctx.req, ctx.res);
const uploadd = upload.single('file');
uploadd(ctx.req, ctx.res);
console.log(ctx.req.file)
// let data = JSON.parse(ctx.req.body.data);
ctx.body = {
msg: "aa"
}
}
module.exports = {
userInsertInto: userInsertInto
}
multer的两种用法,一种是post中间件自动调,一种是自己调。
uploadd(ctx.req, ctx.res); 这行需要传入callback,好好看下文档,里面讲的很清楚
来自✨ Node.js开源项目精选✨
@vendar 感谢