Как загрузить изображение в профиль пользователя с помощью angular express multer mongoose - PullRequest
0 голосов
/ 20 июня 2020

Привет, я загружаю изображение с помощью Multer. когда я выбираю изображение, оно сохраняется в внутренней папке, которая называется загрузками. Bt я хочу сохранить его в базе данных mongodb и отобразить это изображение на интерфейсе с помощью anguler. Я не знаю, как это сделать. Пожалуйста, помогите решить эту проблему. вот мой api. js

// set storage engine
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './uploads/')},
    filename: function (req, file, cb) {
      cb(null, Date.now() + '.' + file.fieldname.split('/')[1])
    }
  })
   
  // initialize upload
  const upload = multer({ storage: storage })

 

router.post('/profile',upload.single('image'),  verifyToken, (req, res) => {
     res.json({
        imagUrl:'http://localhost3000/uploads'+ req.file.filename})
    const userId = req.userId;
    User.findOne({_id: userId}, (error, user) => {
        if (error) {
            console.log(error)
        } else {
         user.save({$set: {image: req.file}})
        res.status(200).send(user)
        }  
    })
}) 

вот моя услуга. js

private profileUrl = "http://localhost:3000/api/profile/";
uploadImage(image: any) {
     const data = new FormData()
     data.append('image', image)
    return this.http.post<any>(this.profileUrl, data)
   }

вот мой компонент. Ts

uploadImage(event: any) {
    
    this.auth.uploadImage(event.target.files[0])
    .subscribe((res) =>{
      console.log(res)
       this.imgUrl = res.imagUrl
    })
  }

вот мой компонент. html

<input type="file" id="imgUrl" class="form-control-file" (change)="uploadImage($event)">
               <img *ngIf="imgUrl" src="{{imgUrl}}" alt="imgUrl" height="200px">

Ответы [ 2 ]

1 голос
/ 20 июня 2020

Я не прилагаю здесь никаких примеров кода, потому что неясно, какой метод вы предпочитаете развивать эту функцию,

Есть два метода, если вы хотите сохранить в базе данных mongoDB,

  1. GridFS

  2. BSON

(вы можете найти как примеры загрузки изображений, так и демонстрацию node.js по ссылке ниже )

Общая ссылка: https://gist.github.com/aheckmann/2408370

Разница: GridFS. GridFS - это спецификация для хранения и извлечения файлов, размер которых превышает лимит BSON-документа в 16 МБ. ... Вместо того, чтобы хранить файл в одном документе, GridFS делит файл на части, или куски [1], и сохраняет каждый фрагмент как отдельный документ.

Моя рекомендация: Вы можете использовать GridFS, потому что это лучше, чем BSON, и нет ограничений.

Надеюсь, это поможет.

0 голосов
/ 20 июня 2020

Ну, сначала я предлагаю, поскольку вы используете multer, вы могли бы просто сохранить путь к изображению, который хранится в папке загрузок, в mon goose, например req.file.path, и не отображать все изображение как файл, поскольку для этого требуется много места, и это не рекомендуется делать. а на сервере вы можете использовать папку загрузок как stati c (с express js), пожалуйста, ознакомьтесь с этим, чтобы узнать больше. https://expressjs.com/en/starter/static-files.html https://github.com/expressjs/multer/blob/master/README.md

...