reactquill中图⽚上传由默认转成base64改成上传到服务
器的⽅法
使⽤react-quill富⽂本编辑器，⾥⾯处理图⽚是默认转成base64，提交到后台的时候⽂件太⼤，因此这⾥改写处理image的逻辑，改成上传到服务器。
具体代码如下：
配置1
import Quill from 'quill'
react面试题ref概念import ReactQuill from 'react-quill'
import 'react-quill/ss'
import 'react-quill/dist/quill.snow.css'
import QuillEmoji from 'quill-emoji'
import 'quill-emoji/dist/quill-emoji.css'
'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 = Editor()
const input = ateElement('input')
input.setAttribute('type', 'file')
input.setAttribute('accept', 'image/*')
input.click()
const file = input.files[0]
const formData = new FormData()
formData.append('quill-image', file)
const res = await uploadFile(formData)
const range = Selection()
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)
}
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。