使用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) } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“react quill中图片上传由默认转成base64改成上传到服务器的方法”评论...
更新动态
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]