Angular-5 froala 图片上传答案

【问题标题】：Angular-5 froala Image UploadAngular-5 froala 图片上传
【发布时间】：2018-06-11 21:57:17
【问题描述】：

我在我的 Angular 项目中使用 froala 编辑器。我将上传路径指向我的资产文件，但是当我浏览页面时显示“出了点问题”，我检查了开发人员工具错误，它显示图像路径为 404。

我的 ts 文件是这样的

import { Component, OnInit } from '@angular/core';


@Component({
    selector: 'app-editor',
    templateUrl: './editor.component.html',
    styleUrls: ['./editor.component.css']
})
export class EditorComponent implements OnInit {

    constructor() { }

    public editorContent: string ="";

    ngOnInit() {
    }

    public onClickMe()
    {
        alert(this.editorContent);
    }

    public options: Object = {
        charCounterCount: true,
        // Set the image upload parameter.
        imageUploadParam: 'image_param',

        // Set the image upload URL.
        imageUploadURL: 'assets/upload_image',

        // Additional upload params.
        imageUploadParams: {id: 'my_editor'},

        // Set request type.
        imageUploadMethod: 'POST',

        // Set max image size to 5MB.
        imageMaxSize: 5 * 1024 * 1024,

        // Allow to upload PNG and JPG.
        imageAllowedTypes: ['jpeg', 'jpg', 'png'],

    };
}

怎么了？

我的html文件是这样的

<div [froalaEditor]="options" [(froalaModel)]="editorContent"></div>

<button type="button" class="btn btn-success" (click)="onClickMe()">Kaydet</button>

【问题讨论】：

请检查 "../node_modules/froala-editor/js/image.min.js" 是否没有添加到 angular.cli.json b>，请将其添加到 angular.cli.json

标签： angular froala

【解决方案1】：

尝试用这个替换你的对象。

public options: Object = {
    charCounterCount: true,
    // Set the image upload parameter.
    imageUploadParam: 'image_param',

    // Set the image upload URL.
    imageUploadURL: 'assets/upload_image',

    // Additional upload params.
    imageUploadParams: {id: 'my_editor'},

    // Set request type.
    imageUploadMethod: 'POST',

    // Set max image size to 5MB.
    imageMaxSize: 5 * 1024 * 1024,

    // Allow to upload PNG and JPG.
    imageAllowedTypes: ['jpeg', 'jpg', 'png'],
    events:  {
  'froalaEditor.initialized':  function () {
    console.log('initialized');
  },
  'froalaEditor.image.beforeUpload':  function  (e,  editor,  images) {
    //Your code 
    if  (images.length) {
      // Create a File Reader.
      const  reader  =  new  FileReader();
      // Set the reader to insert images when they are loaded.
      reader.onload  =  (ev)  =>  {
        const  result  =  ev.target['result'];
        editor.image.insert(result,  null,  null,  editor.image.get());
        console.log(ev,  editor.image,  ev.target['result'])
      };
      // Read image as base64.
      reader.readAsDataURL(images[0]);
    }
    // Stop default upload chain.
    return  false;
  }

};}

【讨论】：