使用 react-quil 存储嵌入在文本中的图像的正确方法

编程问答 2022-05-28

问题描述

我正在使用 react-quill 1.3.3。我还允许在帖子中添加图像。 quill 现在的工作方式是，它只是将图像转换为字符串并将其全部作为文本发送。问题是这似乎需要大量额外的内存（数据）。例如，对于只有 20K 的图像，我收到 413 错误，“413（有效载荷太大）”等。真正的方法是将图像转换为链接并将图像保存到云服务。我已经有用于保存头像图像的云服务，因此可以复制。问题是，我们如何让 react-quill 做到这一点？ quill 似乎是将图像转换为文本的一站式商店，因此我们将不得不进行一些特殊的编码，而我不知道该怎么做。

这里是羽毛笔组件：

for (RegionServiceObject item : items) {
    item.getRegion();
    item.getService();
    // use them here
}

Here is some work done 做类似的事情，但我不知道如何将此代码添加到我的应用中。

我期待的是我们应该能够使用 quill 工具栏上的“添加图像”按钮，并且所见即所得可以正常工作，并且图像是从用户的硬盘驱动器中获取的，并放置在正确格式化的文本中。不同之处在于，当您保存时，图像会发送到您的云存储中，并将链接粘贴到保存的 html 中。当您查看帖子时，该链接将再次展开为图片。

如果有人知道为什么图像被转换成如此大的尺寸（超过 20MB），请告诉我，因为我也可能只是接受它作为解决方案。

这是包含羽毛笔的组件部分的代码：

import React from 'react'

export default class PostEditor extends React.Component {
  constructor(props) {
    super(props)
    this.state = { editorHtml: '',theme: 'sNow' }
    this.handleChange = this.handleChange.bind(this)
    if (typeof window !== 'undefined') {
      this.Reactquill = require('react-quill');
      require('katex');
      require('react-quill/dist/quill.sNow.css');
    }
  }

  handleChange (value) {
    this.props.onChange(value);
  }

  render() {
    const Reactquill = this.Reactquill
    const { value } = this.props;
    
    if (typeof window !== 'undefined' && Reactquill) {
      return (
        <Reactquill
          onChange={this.handleChange}
          theme="sNow"
          value={value}
          modules={PostEditor.modules}
        />
      )
    } else {
      return <textarea />;
    }
  }
}

PostEditor.modules = {
  toolbar: [
    [{ 'header': '1'},{'header': '2'},{ 'font': [] }],[{size: []}],['bold','italic','underline','strike','blockquote'],[{'list': 'ordered'},{'list': 'bullet'},{'indent': '-1'},{'indent': '+1'}],['link','image','video','formula'],['clean']
  ],clipboard: {
    // toggle to add extra line breaks when pasting HTML:
    matchVisual: false,}
}

PostEditor.formats = [
  'header','font','size','bold','blockquote','list','bullet','indent','link','formula'
]

// PostEditor.propTypes = {
//   placeholder: PropTypes.string,// }

编辑： 我想出了第二个解决方案。在我的 Apollo 服务器代码中，我添加了 bodyParser as recommended here。现在似乎工作正常。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptquillreact-quillreactjsreactjs