所以我现在一直试图上传图像,但它似乎无法正常工作。在我的模板中选择后,我将图像发送到我的服务。在服务中,我将它发送到我的node.js服务器。在这个node.js服务器中,我使用Multer来处理图像文件,但是它会引发错误。
有人能看出原因吗?我上传图片真的很新,所以我不知道从哪里开始。此外,我的错误并不具体,所以我无法缩小范围。 ( user.service.ts?edaa:20后端返回代码500,正文为:[object Object] )
我要上传的文件是.png文件
node.js后端:我尝试使用Multer处理文件上传,但是它返回错误。
var multer = require('multer');
const storage = multer.diskStorage({
destination: '../public/uploads/',
filename: function (req, file, cb) {
cb(null, file.fieldName + '-' + Date.now() + path.extname(file.originalname))
}
});
const upload = multer({
storage: storage
}).single('myImage');
router.post('/uploadProfilePicture/:userId', function(req, res){
upload(req, res, function (err){
if (err) {
res.status(500).json({
msg: "whatever"
})
} else {
console.log(req.file);
res.status(200).json({
msg: "sup brah"
})
}
});
});
User.service文件:我是否可能需要添加一些标题
postFile(fileToUpload: File, userId) {
const formData: FormData = new FormData();
console.log(fileToUpload);
formData.append('fileKey', fileToUpload, fileToUpload.name);
return this.http.post("http://localhost:3200/user/uploadProfilePicture/" + userId, formData)
.map(() => { return true; })
.catch((e) => this.handleError(e));
}
profile.component.ts
fileToUpload: File = null;
handleFileInput(files: FileList){
this.fileToUpload = files.item(0);
this.uploadFileToActivity();
}
uploadFileToActivity() {
this.userService.postFile(this.fileToUpload, localStorage.getItem('userId')).subscribe(data => {
console.log(data)
}, error => {
console.log(error);
});
}
profile.component.html
<div class="col-md-8 col-md-offset-2 profilePicSection">
<div class="form-group">
<label for="file">Choose File</label>
<input type="file"
id="file"
(change)="handleFileInput($event.target.files)">
</div>
</div>
页面和控制台的屏幕截图