react quill中图片上传由默认转成base64改成上传到服务器的方法
使用react-quill富文本编辑器，里面处理图片是默认转成base64，提交到后台的时候文件太大，因此这里改写处理image的逻辑，改成上传到服务器。
具体代码如下：
配置1
importQuillfrom'quill'
importReactQuillfrom'react-quill'
import'react-quill/dist/quill.core.css'
import'react-quill/dist/quill.snow.css'
importQuillEmojifrom'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
})
consttoolbarContainer=[
[{'size':['small',false,'large','huge']}],//customdropdown
[{'font':[]}],
[{'header':1},{'header':2}],//custombuttonvalues
['bold','italic','underline','strike'],//toggledbuttons
[{'align':[]}],
[{'indent':'-1'},{'indent':'+1'}],//outdent/indent
[{'direction':'rtl'}],//textdirection
[{'script':'sub'},{'script':'super'}],//superscript/subscript
['blockquote','code-block'],
[{'list':'ordered'},{'list':'bullet'}],
[{'color':[]},{'background':[]}],
['emoji','image','video','link'],
['clean']
]
配置2
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()
constinput=document.createElement('input')
input.setAttribute('type','file')
input.setAttribute('accept','image/*')
input.click()
input.onchange=async()=>{
constfile=input.files[0]
constformData=newFormData()
formData.append('quill-image',file)
constres=awaituploadFile(formData)
constrange=this.quillEditor.getSelection()
constlink=res.data[0].url
//thisparttheimageisinserted
//by'image'optionbelow,youjusthavetoputsrc(link)ofimghere.
this.quillEditor.insertEmbed(range.index,'image',link)
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。