【二】react-draft-wysiwyg 图片本地预览以及base64压缩

__miss__right

于 2018-11-27 15:19:12 发布

阅读量1.8k

点赞数 2

分类专栏： WEB React

本文链接：https://blog.youkuaiyun.com/qq_20337865/article/details/84566229

版权

在使用React-draft-wysiwyg编辑器时，为避免未发表文章导致服务器存储大量临时图片，采取了图片选择后转化为Base64本地预览的策略。通过代码实现图片Base64转换，并结合压缩技术减小文件大小，相关代码参考自优快云博主的文章。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做富文本编辑的时候会遇到一个问题，图片选择后立马上传到服务器的话，用户如果最后没有发表文章，就会导致服务器有很多垃圾的图片，我这里的处理是：从本地选择之后不上传服务器，直接把图片转换成base64 本地预览。下面是代码：

这个是UI的代码

    const textEditor = (
      <Editor
        editorState={editorState}
        toolbarClassName="home-toolbar"
        wrapperClassName="home-wrapper"
        editorClassName="home-editor"
        onEditorStateChange={this.onEditorStateChange}
        toolbar={
  {
          history: { inDropdown: true },
          inline: { inDropdown: false },
          list: { inDropdown: true },
          textAlign: { inDropdown: true },
          image: {
            urlEnabled: false,
            uploadEnabled: true,
            alignmentEnabled: true,   // 是否显示排列按钮 相当于text-align
            uploadCallback: this.imageUploadCallBack,
            previewImage: true,
            inputAccept: 'image/*