如何将React Quill中图片上传从默认转为上传至服务器而非转换为base64？

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

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

代码示例：javascriptimport React, { useState } from 'react';import Quill from 'react-quill';

const Editor=()=> { const [content, setContent]=useState('');

const handleImageUpload=(editor, cursorLocation, resetUploader)=> { const input=document.createElement('input'); input.setAttribute('type', 'file'); input.setAttribute('accept', 'image/*');

input.onchange=()=> { const file=input.files[0]; if (file) { // 创建FormData对象 const formData=new FormData(); formData.append('image', file);

// 使用fetch API上传图片到服务器 fetch('/upload', { method: 'POST', body: formData, }) .then(response=> response.json()) .then(data=> { // 获取服务器返回的图片URL const imageUrl=data.imageUrl; // 将图片URL插入到编辑器中 editor.insertEmbed(cursorLocation, 'image', imageUrl); resetUploader(); // 重置文件上传器 }) .catch(error=> console.error('Error uploading image:', error)); } };

input.click(); };

return ( handleImageUpload(this.quill, this.quill.getSelection(true).index) } } }} /> );};

export default Editor;

使用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) } }

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