Node.js Angular NodeJ在添加文件时出错
您好,我正在尝试使用Angular和Nodejs将一个新文件添加到我的mongodb数据库中 后端功能在postman上运行良好 但在前端,它给了我一个错误,我没有找出问题所在 在我对后端函数做了一些更改之前,它一直在工作 这是我的POST APINode.js Angular NodeJ在添加文件时出错,node.js,angular,typescript,mongodb,multer,Node.js,Angular,Typescript,Mongodb,Multer,您好,我正在尝试使用Angular和Nodejs将一个新文件添加到我的mongodb数据库中 后端功能在postman上运行良好 但在前端,它给了我一个错误,我没有找出问题所在 在我对后端函数做了一些更改之前,它一直在工作 这是我的POST API router.post('/create',multer({ storage : storage}).any(), (req, res) => { var sample = fs.readFileSync('./uploads/'+re
router.post('/create',multer({ storage : storage}).any(), (req, res) => {
var sample = fs.readFileSync('./uploads/'+req.files[0].filename,'utf8');
function Filetostring(){
let arr = sample.split(/\r?\n/);
// Find returns the first element that matches our criteria
const step = arr.filter((step , idx)=> {
if (step.includes("step")) {
console.log(step); //this gives me the first result I need
return true;
}
return false;
});
let stepss = JSON.stringify(step)
let newString = stepss.replace(/[\[\]\'\s]/g, ' ');
let newString2 = newString.replace(/"/g, '');
let newString3 = newString2.replace(/#step/g, '');
let newString4 = newString3.replace(/,/g, '\n');
return newString4;
}
let steps = Filetostring()
console.log(steps)
var tc = new Testcase({
name: req.body.name,
upload: req.files[0].filename ,
run : steps,
modify: req.body.modify,
delete: req.body.delete,
step1: req.body.step1,
step2: req.body.step2,
step3: req.body.step3,
step4: req.body.step4,
step5: req.body.step5,
step6: req.body.step6,
step7: req.body.step7,
});
console.log(req.files[0].filename);
tc.save((err, doc) => {
if (err) { res.status(401).send("errorrrrr") }
else {
res.status(200).send(doc)
}
});
});
这是我的服务。ts
private create = 'http://localhost:5555/testcase/create';
postTestCase(testcase,file:File) {
const formData = new FormData();
formData .append('file', file);
formData .append('name', testcase.name);
formData .append('step1', testcase.step1);
formData .append('modify', testcase.modify);
formData .append('run', testcase.run);
formData .append('delete', testcase.delete);
formData .append('step2', testcase.step2);
formData .append('step3', testcase.step3);
formData .append('step4', testcase.step4);
formData .append('step5', testcase.step5);
formData .append('step6', testcase.step6);
formData .append('step7', testcase.step7);
return this.http.post<any>(this.create, formData );
}
addtestcaseData = {'name': '',
'step1': '',
'modify': '',
'run': '',
'delete': '',
'upload': File = null,
'step2': '',
'step3': '',
'step4': '',
'step5': '',
'step6': '',
'step7':''}
addtestcase(){
this.testcaseService.postTestCase(this.addtestcaseData,this.addtestcaseData.upload)
.subscribe(
res => {
console.log(res)
this._router.navigate(['/admin'])
},
err => {
console.log(err);
}
)
};
handleFileInput(files: FileList) {
this.addtestcaseData.upload = files.item(0);
}
这是我的组件.html
<div class="card rounded-0">
<div class="card-header">
<h3 class="mb-0">Add Test Case</h3>
</div>
<div class="card-body">
<form class="form" #testcaseForm="ngForm" enctype="multipart/form-data" >
<div class="form-group">
<label for="uname1">Name</label>
<input [(ngModel)]="addtestcaseData.name" class="form-control rounded-0" name="Name" type="text" required>
</div>
<div class="form-group">
<label for="file" class="mr-2">Upload Test Case</label>
<input type="file"
id="file" name="file"
(change)="handleFileInput($event.target.files)">
<!--<button (click)="addfile()" type="button" class="btn btn-success float-right">Add File</button>
-->
</div>
<button (click)="addtestcase()" type="button" class="btn btn-success float-right">Add</button>
</form>
</div>
<!--/card-block-->
</div>
添加测试用例
名称
上传测试用例
添加
尝试使用req.file获取文件
var tc = new Testcase({
name: req.body.name,
upload: req.file,
run : steps,
modify: req.body.modify,
delete: req.body.delete,
step1: req.body.step1,
step2: req.body.step2,
step3: req.body.step3,
step4: req.body.step4,
step5: req.body.step5,
step6: req.body.step6,
step7: req.body.step7,
});
console.log(req.files[0].filename);
路线呢
router.post('/create',multer({ storage : storage}).single('upload'), (req, res) => {
对于前端,将输入的名称更改为
<input type="file"
id="file" name="upload"
(change)="handleFileInput($event.target.files)">