react quill中图片上传由默认转成base64改成上传到服务器的方法
2019-10-30 18:06
2907 查看
使用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) } }
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- Java上传文件图片到服务器的方法
- ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结
- iPhone上向服务器上传图片的方法
- UWP 使用Windows.Web.Http命名空间下的HttpClient使用post方法,上传图片服务器
- java连接Fastdfs图片服务器上传失败的解决方法
- summernote图片上传功能保存到服务器指定文件夹+php代码+java方法
- Android 通过Base64上传图片到服务器
- layui上传图片到服务器的非项目目录下的方法
- ios中摄像头/相册获取图片,压缩图片,上传服务器方法
- Base64上传图片时 sun.misc.BASE64Encoder找不到jar包的解决方法
- 通过base64上传图片到服务器并读取图片
- 百度UEditor图片文件改变默认保存到项目根路径,自定义上传路径或远程服务器
- ueditor将图片上传至服务器地址的方法
- [iOS9][Xcode7]图片base64上传到服务器后,服务器上的图片损坏问题
- 将图片从PDA端上传到Web服务器的方法
- ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结
- Android 通过Base64上传图片到服务器实现实例
- iOS中摄像头、相册获取图片,压缩图片,上传服务器方法
- ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结
- java POI导出excel(带有图片的数据)以及ftp上传图片到另一台服务器的方法参考代码