时间戳

首页 > 解决方案 > 如何在 angular7 中将图像插入服务器而不是 Base64

angular6 - 如何在 angular7 中将图像插入服务器而不是 Base64

问题描述

我目前正在我的 Angular 项目中使用 ngx-quill。我尝试使用编辑器添加图像，但编辑器上传图像 base64 编码。

editorText : string
editorForm: FormGroup
editorContent: any
editorStyle = {
    height: '250px'
}
objectFormat = [
    { insert: 'Hello ' },
    { insert: 'World!', attributes: { bold: true } },
    { insert: '\n' }
]
myObjStr:string
config = {
    toolbar: {
        container:
            [
                ['image']
            ]
        }
    }
}


ngOnInit() {
    this.editorForm = new FormGroup({
        'editor': new FormControl(null)
    })

有关将图像上传到服务器的图像处理过程的任何建议

标签： angular6angular7ngx-quill

解决方案

这不会为您上传图片，但如果图片已托管（如插入视频功能），则允许用户粘贴图片网址：

import { QuillModules, defaultModules } from 'ngx-quill';

export class MyComponent {

    quillModules: QuillModules = {
    toolbar: {
      container: defaultModules.toolbar, 
      handlers: {
        image: imageHandler
      }
    }
  };

}

function imageHandler(this: any) {
  imageHandler(this: any) {
    const tooltip = this.quill.theme.tooltip;
    const originalSave = tooltip.save;
    const originalHide = tooltip.hide;
    tooltip.save = function(this: any) {
      const range = this.quill.getSelection(true);
      const value = this.textbox.value;
      if (value) {
        this.quill.insertEmbed(range.index, 'image', value, 'user');
      }
    };
    // Called on hide and save.
    tooltip.hide = function (this: any) {
       tooltip.save = originalSave;
       tooltip.hide = originalHide;
       tooltip.hide();
    };
    tooltip.edit('image');
    tooltip.textbox.placeholder = "Embed URL";
  }
}

<quill-editor [modules]="quillModules"></quill-editor>

推荐阅读