Как загрузить / загрузить аудиофайл в / из mongodb с использованием углового клиента и (экспресс + мультитер + узел) на стороне сервера - PullRequest
Новая
       21

Как загрузить / загрузить аудиофайл в / из mongodb с использованием углового клиента и (экспресс + мультитер + узел) на стороне сервера

0 голосов
/ 12 октября 2019

Я новичок в разработке MEAN. Я хочу разработать веб-приложение, которое может загружать / скачивать аудиофайлы в и из mongoDB, используя угловую клиентскую сторону и серверный узел + экспресс + multer

, так что я уже решил Загрузка / чтение изображенийв и из mongod DB, которая работает нормально. но я абсолютно не знаю, как поступить, чтобы иметь возможность загружать аудио файлы и извлекать их для чтения / загрузки на моей стороне клиента.

вот код, который у меня сейчас

на стороне клиента .hmtl 

<input type="file" #filePicker (change)="onImagePick($event)">
    <div class="image-preview" *ngIf="imagePreview">
      <img [src]="imagePreview" alt="">
    </div>

на стороне клиента .ts 

onImagePick(event: Event) {
    const file = (event.target as HTMLInputElement).files[0];
    this.myForm.get('image').patchValue(file);
    this.myForm.get('image').updateValueAndValidity();
    const reader = new FileReader();
    reader.onload = () => {
      if (this.myForm.get('image').valid) {
        this.imagePreview = reader.result as string;
      } else {
        this.imagePreview = null;
      }
    };
    reader.readAsDataURL(file);
  }
}

onSubmit() {
...
    this.audioService.createNewAudioWithFile(audio, this.myForm.get('image').value).then(
      () => {
        this.myForm.reset();
        this.loading = false;
        this.router.navigate(['/all-audio']);
      },
      (error) => {
        this.loading = false;
        this.errorMessage = error.message;
      }
    );
  }

service на стороне клиента .ts 

createNewAudioWithFile(audio: Audio, image: File) {
    return new Promise((resolve, reject) => {
      const audioData = new FormData();
      audioData.append('audio', JSON.stringify(audio));
      audioData.append('image', image, thing.title);
      this.http.post('http://localhost:3000/api/audio', audioData).subscribe(
        (response) => {
          resolve(response);
        },
        (error) => {
          reject(error);
        }
      );
    });
  }

на стороне сервера

middleware 

const multer = require('multer');

const MIME_TYPES = {
  'image/jpg': 'jpg',
  'image/jpeg': 'jpg',
  'image/png': 'png'
};

const storage = multer.diskStorage({
  destination: (req, file, callback) => {
    callback(null, 'images');
  },
  filename: (req, file, callback) => {
    const name = file.originalname.split(' ').join('_');
    const extension = MIME_TYPES[file.mimetype];
    callback(null, name + Date.now() + '.' + extension);
  }
});

module.exports = multer({storage: storage}).single('image');

контроллер: 

exports.createAudio = (req, res, next) => {
  req.body.audio= JSON.parse(req.body.audio);
  const url = req.protocol + '://' + req.get('host');
  const audio = new Audio({
    title: req.body.audio.title,
    description: req.body.audio.description,
    imageUrl: url + '/images/' + req.file.filename
  });
  thing.save().then(
    () => {
      res.status(201).json({
        message: 'Post saved successfully!'
      });
    }
  ).catch(
    (error) => {
      res.status(400).json({
        error: error
      });
    }
  );
};

app.js 

const path = require('path');
app.use('/images', express.static(path.join(__dirname, 'images')));

, как я уже сказал, он отлично работает для загрузки изображений, гайка, теперь я хотел бынравится добавлять аудио загрузки. и быть в состоянии получить аудио от бэкэнда до моего внешнего интерфейса и воспроизвести его.

Любая помощь или предложения, пожалуйста?

...