Froala Editor - 图片上传事件无法正常工作 - Angular 9。

Question

你好

   public options: Object = {
      events: {
        'froalaEditor.image.beforeUpload': function(e, editor, images) {

            alert('')
        }
    }
}

上传图片后，事件无法进行

Answer 1

你需要在项目中安装 axios 来帮助发送请求。

为此运行以下命令

npm install axios

之后，你有一对夫妇，允许图片上传到服务器，但最重要的是，imageUpload属性必须设置为true，更多内容请看下面的代码片段。

public options: Object = {
  charCounterCount: true,
  imageUpload: true,
  imageUploadMethod: 'POST',
  // Set max image size to 5MB.
  imageMaxSize: 5 * 1024 * 1024,
  events: {
    'froalaEditor.image.beforeUpload': function(e, editor, images): any {
      // Before image is uploaded
      const data = new FormData();
      data.append('image', images[0]);

      axios.post('your_imgur_api_url', data, {
        headers: {
          'accept': 'application/json',
          'Authorization': 'your_imgur_client_id/api_key',
          'Accept-Language': 'en-US,en;q=0.8',
        }
      }).then(res => {
        editor.image.insert(res.data.data.link, null, null, editor.image.get());
      }).catch(err => {
        console.log(err);
      });
      return false;
    }
  }
};