我采取的利用平均值堆栈和角6.在那里,我想提交表单文件上传的web应用程序。 “巴纽”文件应该被上传。 我想保存在不同的文件服务器的文件和发送的URL image.Currently我将文件上传到一个文件夹在我的项目并保存图像以dB为单位。 然后,它可以节省这样的。 “数据:图像/ PNG; BASE64,iVBORw0KGgoAAAANSUhEUgAAAV4AAAFUCAYAAABssFR8AAAK ......”但我想保存在MongoDB中的图像URL和图像应该由URL来retrived。 我跟着这个方法。 如何使用multer返回图像的URL
var mapInfo = require('../../../models/mongoModels/map');
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + '.png')
}
})
var upload = multer({ storage: storage, limits: { fileSize: 524288 } });
router.post('/uploadMap', upload.single('milespecMap'), function (req, res, next) {
//var imageName = req.file.filename;
var path = req.file.filename;
console.log("file Name is"+req.file.filename);
console.log("file path is"+req.file.path);
//res.send(imageName);
res.end(this.path);
});
//Save or update map
router.post("/update", function (req, res) {
var mod = new mapInfo(req.body);
mapInfo.findOneAndUpdate(
{
mapName: req.body.mapName,
},
req.body,
{ upsert: true, new: true },
function (err, data) {
if (err) {
console.log(err);
res.send(err);
} else {
// console.log(res);
res.send(mod);
}
}
);
});
module.exports = router;
这是我的架构。
// Schema
var mapSchema = new mongoose.Schema({
mapName: {
type: String,
},
milespecUrl: {
type: String,
},
});
module.exports = mongoose.model( '属于MapData',mapSchema);
这是我的.ts文件
export class MapsComponent implements OnInit {
closeResult: string;
currentMapDetails: Map = new Map();
selectedFile: File = null;
public uploader: FileUploader = new FileUploader({ url: URL, itemAlias: 'milespecMap', });
constructor(private modalService: NgbModal,
private mapsService: MapsService,
private http: Http,
private router: Router
) { }
ngOnInit() {
}
openModal(content: any) {
this.modalService.open(content).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
handleFileInput(file: FileList) {
this.selectedFile = file.item(0);
var reader = new FileReader();
reader.onload = (event: any) => {
**this.currentMapDetails.milespecUrl = event.target.result;**
console.log(reader.onload);
}
reader.readAsDataURL(this.selectedFile);
}
updateInfo() {
this.uploader.uploadAll(); ///image upload
this.update();
}
update() {
console.log(this.currentMapDetails);
this.mapsService.updateMap(this.currentMapDetails).subscribe(res => {
this.currentMapDetails;
console.log(res);
}, (err) => {
console.log(err);
});
console.log(this.currentMapDetails);
}
}
这是初步认识HTML部分。
<div class="input-group">
<input type="file" class="form-control" #fileInput name="milespecMap" ng2FileSelect [uploader]="uploader" (change)="handleFileInput($event.target.files)"
/>
</div>
保存在update()函数来完成。 加粗的部分保存图像,而不是网址。 取而代之的是我想要的图像位置的URL设置为“milespecUrl”变量。 我可以在后面end.I“req.file.path”中获取的网址想用它在component.ts文件中设置“milespecUrl”。 有没有人有一个想法?