从'multer对象检索文件路径和保存在MongoDB中使用的NodeJS和角6(Retri

2019-10-29 18:13发布

我采取的利用平均值堆栈和角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”。 有没有人有一个想法?

文章来源: Retrieve file path from 'multer object' and save in mongodb using nodejs and Angular 6