Question

我正在使用MEAN Stack和Angular 6实现一个Web应用程序。我想在此提交带有文件上传的表单。 “ .png”文件应上传。我想将文件保存在其他文件服务器中并将URL发送到图像。当前我将文件上传到项目中的文件夹中，并将图像保存在db中。然后这样保存。 “ data：image / png; base64，iVBORw0KGgoAAAANSUhEUgAAAV4AAAFUCAYAAABssFR8AAAK ...” 但我想将图像URL保存在mongodb中，并且该图像应由URL检索。我遵循了这种方法。 How to return image url using multer

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。相反，我想将图像位置的URL设置为“ milespecUrl”变量。我可以在后端通过'req.file.path'检索该URL。我想在component.ts文件中使用它来设置'milespecUrl'。有人有主意吗？

从'multer object'检索文件路径，并使用nodejs和Angular 6保存在mongodb中

0 个答案: