使用react.js node.js express.js REST API将配置文件pic上载到sqlite DB

因此，我尝试通过react.js应用程序将配置文件图像上载到后端，该后端使用node.js express.js和sqlite作为数据库，以REST API的形式运行

但不知何故，我找不到适合我的教程。不过我必须靠得很近。 所以我现在得到的是：

我的路线如下所示：
playerRoutes.js：

const express=require（'express'）；
const router=express.router（）；
const multer=require（'multer'）；
const uuidv4=require（'uuid/v4'）；
const upload_dir='/上传'；
const storage=multer.diskStorage({
目的地：（请求、文件、cb）=>{
cb（空，上传目录）；
},
文件名：（请求、文件、cb）=>{
cb（null，`${uuidv4（）}-${file.filename.toLowerCase}`）；
}
});
const upload=multer({
存储：存储，
fileFilter：（请求、文件、cb）=>{
如果(
file.mimetype=='image/png'||
file.mimetype=='image/jpg'||
file.mimetype=='image/jpeg'
) {
cb（null，true）；
}否则{
cb（空，假）；
返回cb（新错误（'Only.png、.jpg和.jpeg格式允许！'））；
}
}
});
const{playerController}=require（'../controller'）；
get（'/'，playerController.getAllPlayer）；
get（'/:id'，playerController.getSpecificPlayer）；
router.post（'/'，upload.single（'profileImg'），playerController.createPlayer）；
router.put（'/:id'，playerController.updatePlayer）；
删除（'/:id'，playerController.deletePlayer）；
module.exports=路由器；

所以关键点是设置

存储

，它告诉在哪里上传+上传中的文件过滤器，对吗

还有将“upload.single”（'profileImg'）的

route.post

，对吗？路线将包括我的create Player控制器，可在此处找到：

playerController.js

const{Player}=require（'../models'）；
module.exports={
getAllPlayer（请求、恢复）{
返回Player.findAll({
属性：['id'，'name'，'昵称'，'profileImg']
})
.然后（玩家=>res.status（200）.发送（玩家））
.catch（err=>res.status（400）.send（err））；
},
getSpecificPlayer（请求、恢复）{
返回Player.findByPk（req.params.id{
属性：['id'，'name'，'昵称'，'profileImg']
}).然后（玩家=>{
如果（！玩家）{
返回资源状态（404）。发送({
消息：`找不到id为${req.params.id}的播放器`
});
}
返回res.status（200）。发送（玩家）；
});
},
createPlayer（请求、恢复）{
console.log（请求文件）；
return Player.create({
名称：req.body.name，
昵称：req.body.昵称
})
.然后（玩家=>res.status（201）.发送（玩家））
.catch（err=>res.status（400）.send（err））；
},
更新层（req，res）{
返回Player.findByPk（req.params.id{
属性：['id'，'name'，'昵称'，'profileImg']
})
.然后（玩家=>{
如果（！玩家）{
返回资源状态（404）。发送({
消息：`找不到id为${req.params.id}的播放器`
});
}
还击球员
.更新({
名称：req.body.name | | player.name，
昵称：req.body.昵称| | player.昵称，
profileImg:req.body.profileImg | | player.profileImg
})
.然后（（）=>res.status（200）.发送（播放器））
.catch（err=>res.status（400）.send（err））；
})
.catch（err=>res.status（400）.send（err））；
},
删除播放器（请求、恢复）{
返回Player.findByPk（req.params.id{
属性：['id'，'name'，'昵称'，'profileImg']
})
.然后（玩家=>{
如果（！玩家）{
返回资源状态（404）。发送({
消息：`找不到id为${req.params.id}的播放器`
});
}
还击球员
.销毁
。然后（（）=>res.status（204.send（））
.catch（err=>res.status（400）.send（err））；
})
.catch（err=>res.status（400）.send（err））；
}
};

现在，关于几个教程，当使用post访问端点时，我应该在

console.log（req.file）

中看到相关信息，对吗

模型如下所示：

models/player.js（续集模型）

“严格使用”；
module.exports=（sequelize，数据类型）=>{
const Player=sequelize.define(
“玩家”，
{
姓名：{
类型：DataTypes.STRING，
验证：{notEmpty:{msg:'Player name不能为空'}}
},
昵称：{
类型：DataTypes.STRING
},
简介：{
类型：DataTypes.STRING
}
},
{}
);
Player.associate=功能（型号）{
//这里可以定义关联
};
返回球员；
};

现在来看前端代码（react.js）：

这是我在react应用程序中加载的表单：

playexper.js

import React，{Component}来自'React'；
从“axios”导入axios；
进口{
FormControl，
FormGroup，
FormLabel，
形式，
按钮
}来自“反应引导”；
从“道具类型”导入道具类型；
类PlayPerform扩展组件{
状态={
名称：“”，
昵称：''，
配置文件img:'
};
handleSubmit=e=>{
e、 预防默认值（）；
axios
.post（${process.env.API_URL}/player`，JSON.stringify（this.state）{
标题：{
接受：'application/json'，
“内容类型”：“应用程序/json”
}
})
.然后（（）=>this.props.onCreate（））
.catch（err=>console.log（err））；
};
onFileChange（e）{
this.setState（{profileImg:e.target.files[0]}）；
}
handelChange=e=>{
这是我的国家({
[e.target.name]：e.target.value
});
};
render（）{
返回(
名称
昵称
图画
添加
);
}
}
PlayPerform.propTypes={
onCreate:PropTypes.func.isRequired
};
导出默认播放性能