vue2使用quill-image-extend-module

### 安装与配置 为了在 Vue 2 中集成 `quill-image-extend-module` 插件并实现图片上传功能，需遵循特定步骤来确保组件正常工作。 #### 安装依赖包 首先，在项目根目录执行命令安装必要的 npm 包： ```bash npm install vue-quill-editor quill-image-extend-module axios --save ``` 这会下载 `vue-quill-editor`, `quill-image-extend-module` 和用于处理 HTTP 请求的 `axios` 库[^1]。 #### 导入模块 接着，在主应用文件（通常是 main.js 或者入口文件）里导入 Quill 及其样式表，并注册全局组件以便可以在任何地方使用它: ```javascript // main.js or entry file import Vue from 'vue'; import VueQuillEditor from 'vue-quill-editor'; import 'quill/dist/quill.core.css'; import 'quill/dist/quill.snow.css'; import 'quill/dist/quill.bubble.css'; Vue.use(VueQuillEditor); ``` 同时也要记得引入 `quill-image-extend-module` 并初始化所需对象： ```javascript import { container, ImageExtend } from 'quill-image-extend-module' ``` #### 配置编辑器选项 随后，在具体使用的页面或组件内设置好 editor 的 options 属性。这里需要注意的是要指定图片上传的相关参数，比如 action URL、回调函数等。这些都应放置于 Vue 组件的数据属性 data 下面作为 editorOption 对象的一部分[^3]: ```javascript export default { name: "YourComponentName", data(){ return{ content: '', editorOption:{ placeholder:'请输入内容...', modules:{ toolbar:[ ['bold','italic'], [{list:'ordered'},{'list':'bullet'}], [{'indent': '-1'}, {'indent': '+1'}], ['link', 'image'] ], ImageExtend:{ // 图片上传配置项 loading:true, name:'file', size:2, // 单位为 MB，默认无大小限制 action:'/your/upload/api/endpoint',// 后端接收图片上传请求的服务地址 headers:(xhr)=>{ // 设置额外头部信息 xhr.setRequestHeader('Authorization', localStorage.getItem('token')) }, response(res){ console.log(res); // 打印服务端响应结果 return res.url || ''; // 返回实际存储位置链接给前端显示 } } } } }; } } ``` #### 处理跨域问题 如果遇到跨域问题，则可以通过修改服务器端 CORS 策略解决；也可以考虑采用代理的方式绕过浏览器同源策略限制。另外一种常见做法是在 mounted 生命周期钩子里面重写默认行为，利用隐藏 input[type="file"] 来触发本地选择文件对话框完成上传操作[^4]。