Как загрузить изображение и прикрепить документ с помощью углового редактора

Question

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

Я установил угловой редактор от https://www.npmjs.com/package/@kolkov/angular-editor

import { Component, OnInit } from '@angular/core';
import { AngularEditorConfig } from '@kolkov/angular-editor';
import {BlogService} from 'src/app/service/blog.service';
@Component({
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css']
})
export class BlogComponent implements OnInit {

  editorConfig: AngularEditorConfig = {
    editable: true,
    spellcheck: true,
    height: '25rem',
    minHeight: '5rem',
    placeholder: 'Enter text here...',
    translate: 'no',
   uploadUrl: '/home/web/Pictures', // if needed
    customClasses: [ // optional
      {
        name: "quote",
        class: "quote",
      },
      {
        name: 'redText',
        class: 'redText'
      },
      {
        name: "titleText",
        class: "titleText",
        tag: "h1",
      },
    ]
  };

  constructor(private blogservice: BlogService) { }

  ngOnInit() {
  }
  Save(blogForm: any) {

    if (blogForm.valid === true) {
      blogForm = blogForm.value;
      this.blogservice.Save(blogForm).subscribe(response => {console.log(response);
        });
      window.alert('Blog published successfully');


     }

   }

}

В настоящее время я могу добавлять стили к содержимому в редакторе, но ожидаю добавить изображения и другие документы

Answer 1

uploadUrl: '/home/web/Pictures', // if needed

На самом деле это не URL-адрес, куда загружаются ваши изображения, а URL-адрес серверного сервиса, который обрабатывает загрузку и возвращает местоположение изображения после завершения загрузки.

В интерфейсе / компоненте:

uploadUrl: 'localhost:8080/server/page/upload-image', 

В Backend, в файле, куда когда-либо upload-image маршрутизируется:

router.post('/', async (req, res) => {
   //Here you do the uploading. The way you do is up to you. 


   //Once you have done with image uploading, you have to return path to image. I was using google cloud service and there I am dealing with absolute paths, so I don't know if relative path is going to work.

   res.status(200).send({
       "status":true, 
       "originalName":'demoImage.jpg', 
       "generatedName":'demoImage.jpg', 
       "msg":"Image upload successful", 
       "imageUrl":`https://storage.googleapis.com/article-images/demoImage.jpg`
   })

})

Затем imageUrl, который вы возвращаете из бэкэнда, оборачивается тегами <img></img> и вставляется в редактор.