使用quill-editor实现自定义图片上传至服务器

最新推荐文章于 2024-07-11 18:11:23 发布

16205102苏波

最新推荐文章于 2024-07-11 18:11:23 发布

阅读量1.1k

点赞数

文章标签： vue 富文本图片上传 quill-image-extend-module upload

本文链接：https://blog.csdn.net/weixin_43123562/article/details/100044151

版权

安装依赖

安装富文本编辑器
npm install vue-quill-editor --save
安装图片上传插件
npm install quill-image-extend-module --save-dev

使用

引入

    //富文本编辑器
    import {quillEditor, Quill} from 'vue-quill-editor'
    import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'

    import "quill/dist/quill.core.css"
    import "quill/dist/quill.snow.css"
    import "quill/dist/quill.bubble.css"
    Quill.register('modules/ImageExtend', ImageExtend)

注册组件

components: {
  quillEditor
  },

创建一个编辑器

<div class="edit_container">
      <div class="quill-wrap">
           <quill-editor v-model="content" ref="myQuillEditor"  :options="editorOption"></quill-editor>
       </div>
   </div>

参数配置

data(){
	return{
	 // 富文本框参数设置
     editorOption: {
          modules: {
              ImageExtend: {
                  loading: true, //是否显示上传加载
                  name: 'file', //设置上传参数名
                  headers: (xhr)=>{
                      xhr.setRequestHeader('token',sessionStorage.getItem('user')) //设置token
                  },
                  action: this.$http.defaults.baseURL+"backend/upload", //设置上传文件请求路径
                  response: (res) => { //这里返回的你上传之后的图片地址
                      return res.data
                  }
              },
              toolbar: {
                  container: container,
                  handlers: {
                      'image': function () {
                          QuillWatch.emit(this.quill.id)
                      }
                  }
              }
          }
	}
}

参数全部配置

editorOption: {
    modules: {
        ImageExtend: {
            loading: true,  // 可选参数 是否显示上传进度和提示语
            name: 'img',  // 图片参数名
            size: 3,  // 可选参数 图片大小，单位为M，1M = 1024kb
            action: updateUrl,  // 服务器地址, 如果action为空，则采用base64插入图片
            // response 为一个函数用来获取服务器返回的具体图片地址
            // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
            // 则 return res.data.url
            response: (res) => {
                return res.info
            },
            headers: (xhr) => {},  // 可选参数 设置请求头部
            start: () => {},  // 可选参数 自定义开始上传触发事件
            end: () => {},  // 可选参数 自定义上传结束触发的事件，无论成功或者失败
            error: () => {},  // 可选参数 自定义网络错误触发的事件
            change: (xhr, formData) => {} // 可选参数 选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
        },
        toolbar: {
            container: container,  // container为工具栏，此次引入了全部工具栏，也可自行配置
            handlers: {
                'image': function () {  // 劫持原来的图片点击按钮事件
                    document.querySelector('.quill-image-input').click()
                }
            }
        }
    }
}