[英]How to upload image and attach document using angular editor
我安装了角度编辑器软件包,并且角度编辑器正在工作,但是我无法上传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');
}
}
}
目前,我能够在编辑器中向内容添加样式,但是希望添加图像和其他文档
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>
标签包裹并粘贴到编辑器中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.