2

我想在 HTML 中显示从 mongodb 检索到的图像。

我的控制台数据是:

{originalname:“dhoni.jpg”,文件名:“file-1558517416483。”,contentType:“image/jpeg”} contentType:“image/jpeg”文件名:“file-1558517416483。” 原始名称:“dhoni.jpg” 原型:对象

这是我的控制台输出数据。我想在我的 HTML 中显示图像。我怎样才能做到这一点。

如何获取图像并显示在我的 html 页面中。

//server.js:

let express = require('express'); 
let app = express(); 
let bodyParser = require('body-parser');
let mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/files');
let conn = mongoose.connection;
let multer = require('multer');
let GridFsStorage = require('multer-gridfs-storage');
let Grid = require('gridfs-stream');
Grid.mongo = mongoose.mongo;
let gfs = Grid(conn.db);
let port = 3000;

// Setting up the root route
app.get('/', (req, res) => {
    res.send('Welcome to the express server');
});

// Allows cross-origin domains to access this API
app.use((req, res, next) => {
    res.append('Access-Control-Allow-Origin' , 'http://localhost:4200');
    res.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.append("Access-Control-Allow-Headers", "Origin, Accept,Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");
    res.append('Access-Control-Allow-Credentials', true);
    next();
});

// BodyParser middleware
app.use(bodyParser.json());

// Setting up the storage element
let storage = GridFsStorage({
    gfs : gfs,

    filename: (req, file, cb) => {
        let date = Date.now();
        // The way you want to store your file in database
        cb(null, file.fieldname + '-' + date + '.'); 
    },

    // Additional Meta-data that you want to store
    metadata: function(req, file, cb) {
        cb(null, { originalname: file.originalname });
    },
    root: 'ctFiles' // Root collection name
});

// Multer configuration for single file uploads
let upload = multer({
    storage: storage
}).single('file');

// Route for file upload
app.post('/upload', (req, res) => {
    upload(req,res, (err) => {
        if(err){
             res.json({error_code:1,err_desc:err});
             return;
        }
        res.json({error_code:0, error_desc: null, file_uploaded: true});
    });
});

// Downloading a single file
app.get('/file/:filename', (req, res) => {
    gfs.collection('ctFiles'); //set collection name to lookup into

    /** First check if file exists */
    gfs.files.find({filename: req.params.filename}).toArray(function(err, files){
        console.log("add");

        if(!files || files.length === 0){
            return res.status(404).json({
                responseCode: 1,
                responseMessage: "error"
            });
        }
        // create read stream
        var readstream = gfs.createReadStream({
            filename: files[0].filename,
            root: "ctFiles"
        });
        // set the proper content type 
        res.set('Content-Type', files[0].contentType)
        // Return response
        return readstream.pipe(res);
    });

});

// Route for getting all the files
app.get('/files', (req, res) => {
    let filesData;
    let count = 0;
    gfs.collection('ctFiles'); // set the collection to look up into

    gfs.files.find({}).toArray((err, files) => {
        // Error checking
        if(!files || files.length === 0){
            return res.status(404).json({
                responseCode: 1,
                responseMessage: "error"
            });
        }
        // Loop through all the files and fetch the necessary information
        files.forEach((file) => {
            filesData = {
                originalname: file.metadata.originalname,
                filename: file.filename,
                contentType: file.contentType
            }
        });
        res.json(filesData);
    });
});

app.listen(port, (req, res) => {
    console.log("Server started on port: " + port);
});
<!--app.component.html:-->

  <div class="row">
      <div class="col-md-4">
        <br>
          <form>
              <div class="form-group">
                  <label for="multiple">Choose file(s)</label>
                  <input type="file" class="form-control" name="multiple" ng2FileSelect [uploader]="uploader" multiple  />
              </div>            
          </form>
      </div>
      </div>
      <div class="col-md-8">
           File(s) Selected: {{ uploader?.queue?.length }}
          <table class="table">
              <thead>
              <tr>
                  <th width="50%">Name</th>
                  <th>Size</th>
                  <th>Progress</th>
                  <th>Status</th>
                  <th>Actions</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let item of uploader.queue">
                  <td><strong>{{ item.file.name }}</strong></td>
                  <td nowrap>{{ item.file.size/1024/1024 | number:'.2' }} MB</td>
                  <td>
                      <div class="progress" style="margin-bottom: 0;">
                          <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                      </div>
                  </td>
                  <td class="text-center">
                      <span *ngIf="item.isSuccess"><i class="fa fa-check"></i></span>
                      <span *ngIf="item.isCancel"><i class="fa fa-ban"></i></span>
                      <span *ngIf="item.isError"><i class="fa fa-times"></i></span>
                  </td>
                  <td nowrap>
                      <button type="button" class="btn btn-success btn-xs"
                              (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
                          <span class="fa fa-upload"></span> Upload
                      </button>
                      <button type="button" class="btn btn-warning btn-xs"
                              (click)="item.cancel()" [disabled]="!item.isUploading">
                          <span class="fa fa-ban"></span> Cancel
                      </button>
                      <button type="button" class="btn btn-danger btn-xs"
                              (click)="item.remove()">
                          <span class="fa fa-trash"></span> Remove
                      </button>
                  </td>
              </tr>
              </tbody>
          </table>
</div>
app.component.ts:

import { FilesService } from './../files.service';
import { Component, OnInit } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(private FileService: FilesService) { }
  private files = [];
  private url = 'http://localhost:3000/upload';
  private uploader: FileUploader;

  ngOnInit() {
    this.uploader = new FileUploader({url: this.url});

    this.FileService.showFileNames().subscribe(response => {
      console.log(response.json());
      this.files = response.json();
    });
  }
}
file.service.ts:

import { Injectable } from '@angular/core';
import { Http, Headers, ResponseContentType } from '@angular/http';

@Injectable()
export class FilesService {

  constructor(private http: Http) { }

  showFileNames() {
    return this.http.get('http://127.0.0.1:3000/files');
  }
}
4

0 回答 0