Quill配置文件上传
时间: 2023-10-24 12:29:49 浏览: 35
根据引用中提供的代码,可以看出Quill的配置文件上传是通过修改处理图片的逻辑实现的。首先,使用了react-quill富文本编辑器,然后在处理图片的逻辑中,将图片上传到服务器而不是默认转成base64编码。
具体的代码如下所示:
```javascript
import Quill from 'quill'
import ReactQuill...
// 配置图片上传
var quill = new Quill('#editor', {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // 加粗、斜体、下划线、删除线
['blockquote', 'code-block'], // 引用、代码块
[{ 'header': 1 }, { 'header': 2 }], // 标题
[{ 'list': 'ordered' }, { 'list': 'bullet' }], // 有序列表、无序列表
[{ 'script': 'sub' }, { 'script': 'super' }], // 上标/下标
[{ 'indent': '-1' }, { 'indent': '+1' }], // 减少缩进/增加缩进
[{ 'direction': 'rtl' }], // 文本方向
[{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
[{ 'header': [1, 2, 3, 4, 5, 6, false }], // 标题大小
[{ 'color': [] }, { 'background': [] }], // 字体颜色、背景颜色
[{ 'font': [] }], // 字体
[{ 'align': [] }], // 对齐方式
['link', 'image', 'video'], // 链接、图片、视频
['clean'] // 清除格式
],
imageHandler: function (image, callback) {
var formData = new FormData();
formData.append('file', image);
// 发送图片文件到后台服务器
axios.post('/upload', formData)
.then(response => {
callback(response.data.url);
})
.catch(error => {
console.log(error);
});
}
},
// 其他配置项...
});
```
在上述代码中,使用了Quill的`modules`选项来配置富文本编辑器的工具栏,包括图片上传功能。通过重写`imageHandler`方法,可以实现将图片文件上传到后台服务器并返回图片的url。具体的上传逻辑需要根据后台服务器的接口来进行修改。
请注意,上面提供的代码只是一个示例,具体的配置文件上传逻辑可能因项目的具体需求而有所不同。你可以根据自己的实际情况进行相应的修改和调整。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [quill实现上传文件](https://blog.csdn.net/weixin_42912237/article/details/120865516)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [react quill中图片上传由默认转成base64改成上传到服务器的方法](https://download.csdn.net/download/weixin_38678022/13680023)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]