在我的ts文件中,我写了this.accountService.sendFile(event.target.files [0]).....它引发了类似的错误
错误TypeError:无法读取未定义的属性“ 0” 在FileReader.reader.onload(editor.component.ts:448) 在ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke(zone.js:392) 在Object.onInvoke(core.js:4630) 在ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke(zone.js:391) 在Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.runGuarded(zone.js:155) 在FileReader。 (zone.js:133)
,图像也不会保存到后端文件夹中。但是路径正在保存到数据库中。我是Meanstack的新手。谁能帮忙。
谢谢。
我的HTML
<div *ngFor="let ill of illustrations; let j = index">
<div *ngIf="j === k">
<div class="illustration" *ngFor="let illus of ill; let i = index">
<span style="font-size:20px; font-weight: bold">{{i+1}}. </span>
<input type="file" style="display:none" #w accept="image/*" (change)="preview($event, j, i)">
<mat-form-field>
<input type="text" [(ngModel)]="illustrations[j][i].title" matInput placeholder="Add an Illustration of your article with title & image"
style="font-size: 20px;font-weight: bold;" required>
<button matTooltip="Select Illustration Image" matSuffix style="min-width:50px" (click)="w.click()"
mat-button color="accent">
<i class="material-icons">insert_photo</i>
</button>
</mat-form-field>
</div>
</div>
</div>
我的Ts文件
preview(event, j, i) {
if (event.target.files && event.target.files[0]) {
// console.log(event.target.files);
// console.log(event.target.files[0]);
var reader = new FileReader();
reader.onload = (event: any) => {
this.illustrations[j][i].imagePath = event.target.result;
//Upload Image here and apply the path to the this.illustrations[j][i].imagePath
this.accountService.sendFile(**event.target.files[0]**, localStorage.getItem('userId'), localStorage.getItem('articleId'), 'Illustrations').subscribe(
response => {
alert(response);
this.illustrations[j][i].imagePath = JSON.parse(response).path;
},
err => {
alert(err.message);
});
}
reader.readAsDataURL(event.target.files[0]);
// alert(this.illustrations[j][i].title);
}
}
我的服务
sendFile(fileToUpload: File, userId, articleId, fileSection) {
const formData: FormData = new FormData();
formData.append('file', fileToUpload);
return this.http.post(this.apiPath + 'user/article/saveFiles/' + userId + '/' + articleId + '/' + fileSection, formData, { responseType: 'text' });
}
我的控制器
router.post('/saveArticleAuthors', function (req, res) {
// console.log(req.body);
Collections.user.updateOne({ _id: req.body._id },
{ $push: { "stack": { dataName: "selectedAuthors", dataValue: req.body.authors } } },
function (error, resp) {
if (error) return console.log("Error: " + error.message);
res.status(200).send(resp);
});
});
router.post('/saveFiles/:userId/:articleId/:fileSection', function (req, res) {
var userId = req.params.userId;
var fileSection = req.params.fileSection;
var articleId = req.params.articleId;
var dirName = SERVER_DIR + userId + '/articles/' + articleId + '/' + fileSection;
var filename = '';
//Defining a result JSON for sending status as response
var result = {
dbStatus: {},
fileStatus: false,
path: false
};
//Middleware for Uploading Files
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, dirName);
},
filename: function (req, file, cb) {
filename = Date.now() + path.extname(file.originalname);
console.log(file);
cb(null, filename);
}
});
var upload = multer({ storage: storage }).array('file');
upload(req, res, function (err) {
if (err) {
return res.end(err.toString());
}
result.fileStatus = "uploaded";
result.path = dirName + '/' + filename;
res.send(result);
console.log(result);
});
});