quill-editor富文本编辑器多图上传并有序展示

前言

最近的工作当中发现有这么一个需求，富文本编辑器图片上传需要按照选择顺序批量上传图片，因为项目应用的是 ElementUI，所以理所当然地会应用到里面的上传（el-upload），但是经过调试发现，并不满足此类型需求，

实现思路

1.针对使用el-upload的上传使用
2.针对原生input的上传使用

el-upload

废话不多说，先丢代码出来

http-request 获取的参数只有一个 params，里面装载的只有每一次上传到临时保存区的单个文件的信息，当批量选择时每次上传临时区成功时都会调用，会导致的问题 你上传图片1、图片2、图片3 最后的上传结果可能会变成图片 1、图片 3、图片 2，这个可能和图片的实体大小有关，有可能因为实体大小问题导致上传到服务器请求回url的速度不一，所以有的图片上传更快地完成，所以有就有上传顺序的问题情况。

此处是已封装代码

调用方式

// html


import quillEditor from '@/components/quill-editor'

components: {
    quillEditor
  },

原生input

返璞归真试试原生

在 change 钩子的回调里（event.target.files）就是我们想要获取到的每一次选择的文件/图片列表，然后针对列表进行处理，还就就是input的样式的时候花了点时间，来回去对比el-upload的样式和自己写的原生样式区别。用法一致