如何使用角度编辑器上传图像并附加文档

Question

我安装了 Angular 编辑器包并且 Angular 编辑器正在工作，但我无法上传 Word 文档、演示文稿和图像

我从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', 

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>标签包裹并粘贴到编辑器中。