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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。