如何将React Quill图片上传从base64转换成上传至服务器？

本文共计599个文字，预计阅读时间需要3分钟。

使用React Quill富文本编辑器，处理图片时默认将图片转换为base64。提交到后台时，文件过大。为此，修改处理image的逻辑，改为上传到服务器。代码如下：

javascriptimport Quill from 'quill';

const toolbarOptions=[ ['bold', 'italic', 'underline', 'strike'], // toggled buttons ['blockquote', 'code-block'], [{ 'header': 1 }, { 'header': 2 }], // custom button values [{ 'list': 'ordered'}, { 'list': 'bullet' }], [{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript [{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent [{ 'direction': 'rtl' }], // text direction [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // custom header [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme [{ 'font': [] }], [{ 'align': [] }], ['clean'], // remove formatting button ['link', 'image', 'video'] // link and image, video];

const quill=new Quill('#editor', { theme: 'snow', modules: { toolbar: toolbarOptions }});

quill.on('text-change', function(delta, oldDelta, source) { const content=quill.root.innerHTML; const images=content.match(/]*src=[^]*[^>]*>/g);

if (images) { images.forEach((img)=> { const src=img.match(/src=([^]*)/)[1]; const xhr=new XMLHttpRequest(); xhr.open('GET', src, true); xhr.responseType='blob'; xhr.onload=function() { if (xhr.status===200) { const reader=new FileReader(); reader.onloadend=function() { const base64data=reader.result; const newImg=img.replace(/src=[^]*/, `src=${base64data}`); quill.root.innerHTML=quill.root.innerHTML.replace(img, newImg); }; reader.readAsDataURL(xhr.response); } }; xhr.send(); }); }});

使用react-quill富文本编辑器，里面处理图片是默认转成base64，提交到后台的时候文件太大，因此这里改写处理image的逻辑，改成上传到服务器。

具体代码如下：

配置1

import Quill from 'quill' import ReactQuill from 'react-quill' import 'react-quill/dist/quill.core.css' import 'react-quill/dist/quill.snow.css' import QuillEmoji from 'quill-emoji' import 'quill-emoji/dist/quill-emoji.css' Quill.register({ 'modules/emoji-toolbar': QuillEmoji.ToolbarEmoji, // 'modules/emoji-textarea': QuillEmoji.TextAreaEmoji, 'modules/emoji-shortname': QuillEmoji.ShortNameEmoji }) const toolbarContainer = [ [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown [{ 'font': [] }], [{ 'header': 1 }, { 'header': 2 }], // custom button values ['bold', 'italic', 'underline', 'strike'], // toggled buttons [{ 'align': [] }], [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent [{ 'direction': 'rtl' }], // text direction [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript ['blockquote', 'code-block'], [{ 'list': 'ordered' }, { 'list': 'bullet' }], [{ 'color': [] }, { 'background': [] }], ['emoji', 'image', 'video', 'link'], ['clean'] ]

配置2

<ReactQuill ref={ref => this.quillRef = ref} placeholder="填写活动详情~" theme="snow" value={this.state.detailTpl} onChange={this.handleChangeDetail} modules={{ toolbar: { container: toolbarContainer, handlers: { image: this.imageHandler } }, 'emoji-toolbar': true, // 'emoji-textarea': true, 'emoji-shortname': true, }} />

图片处理方法

imageHandler = () => { this.quillEditor = this.quillRef.getEditor() const input = document.createElement('input') input.setAttribute('type', 'file') input.setAttribute('accept', 'image/*') input.click() input.onchange = async () => { const file = input.files[0] const formData = new FormData() formData.append('quill-image', file) const res = await uploadFile(formData) const range = this.quillEditor.getSelection() const link = res.data[0].url // this part the image is inserted // by 'image' option below, you just have to put src(link) of img here. this.quillEditor.insertEmbed(range.index, 'image', link) } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。