vue实战024:Vue-Quill-Editor重写图片上传详解

1、样式重写

我们重新写个简单的样式，用来上传图片是使用，默认隐藏（uploadimg=false），当我们点击上传图片图标时将其显示，所以这里我们要做的就是新增HTML和CSS并且重写toolbar中image的方法。

2、事件重定义

下面要做的就是重新定义image方法，在toolbar中的headers中 我们可以给对应的标签重新定义方法，这里我们要该的是image，当我们点击时显示我们新增的样式，也就是把uploadimg=false改成uploadimg=true，所以我们直接在headers中禁用quill内部上传图片，然后写个点击事件触发新事件。

3、思路：我们需要做的是点击“上传到服务器”按钮将我们选择的文件发送到后台，后台拿到我们的文件后进行存储并返回我们前端文件路径，前端拿到文件的存储路径，再把路径赋给光标所在的img标签中这样就可以在文中中看到我们上传的图片了。

4、前台文件发送

首先要获取到上传的文件，这里我们用的是input标签，属性为file，所以这里我们没法用v-model来获取数据，这时我们需要用到$refs来定位获取，我们给input一个ref属性，然后通过let filename=this.$refs.imgfile.files[0]获取到文件对象。

5、注意事项：我们从前端发送文件给后端时是个文件，所以我们需要创建一个FormData对象来处理文件。

6、后台接受文件并处理

model创建

我们需要创建一个文件的模型，这里用来存储文件的路径，并指定文件存储位置，我定义了一个简单的模型，只有文件名和文件路径，通过参数upload_to指定上传文件的保存目录，具体的操作可以参考：Django实战009：文件上传实现过程详解

7、路由创建

我们需要给前台一个指定的路由来找到视图，我将upload指向了views.uploadfile，也就是uploadfile方法。

8、视图创建

现在我们需要一个视图（uploadfile）来接受前台发送的数据，通过 request.FILES.get('img')来获取文件对象，拿到文件名然后去数据库中查找该对象是否存在，如果存在我们直接返回该对象的路径，如果没有我们就新增并返回文件路径，这里我返回了一个code表示处理成功，返回一个url则是图片的文件路径。

9、注意事项：这里我们用的是filter而不是get，get是获取唯一值，当没有时就会报错，如果要用就用突然try包裹起来使用，用filter则是使用了查询集，没有则返回空。

10、前台接受返回数据

首先我们先接受后台返回到的数据，通过code来判断数据是否处理成，如果失败则弹出“图片插入失败”提示，如果成功我们就将图片插入到光标所在位置即可。