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

前言

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

实现思路

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

el-upload

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

<template>
  <div>
    <quill-editor
	    ref="quill-editor"
	    v-model="content"
	    :options="options"
	    @change="onEditorChange($event)"
      	style="width:100%;height:100%;" />
    <el-upload 
	    class="upload-col" 
	    :show-file-list="false" 
	    auto-upload 
	    :accept="accept" 
	    action="" multiple
	    :http-request="fileUpload"
	    :before-upload="beforeUpload">
      <i class="quill-editor__uploadBtn"></i>
    </el-upload>
  </div>
</template>
<script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import {
    quillEditor
  } from 'vue-quill-editor'
  /**
   * 富文本
   * content 内容
   * options 参数配置
   * uploadImageParam 上传图片的参数
   * 
  */
  export default {
    props: {
      content: {
        type: String,
        required: true
      },
      options:{
        type:Object,
        default:()=>{
          return {
          placeholder: "请输入内容",
          modules: {
            toolbar: {
              container: [
                ['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']
              ],
              handlers: {
                'image': function (value) {
                  if (value) {
                    document.querySelector('.quill-editor__uploadBtn').click()
                  } else {
                    this.quill.format('image', false);
                  }
                }
              }
            }
          }
        }
        }
      },
      uploadImageParam:{
        type:Object,
        default:()=>{
          return {}
        }
      }
    },
    components: {
      quillEditor
    },
    data() {
      return {
        accept: 'image/*',
        imageTypes: ['jpg', 'jpeg', 'png', 'gif']
      }
    },
    methods: {
      fileUpload(fileobj) {
        let param = new FormData()
        param.append('file', fileobj.file)
        for (let key in this.uploadImageParam) {
          param.append(key, this.uploadImageParam[key])
        }
        this.$http.uploadImage(param).then(({ data }) => {
          if (data.code === 200) {
            const quill = this.$refs['quill-editor'].quill
            ,length = quill.getSelection().index
            quill.insertEmbed(length, 'image', data.rows)
            quill.setSelection(length + 1)
          }
        }).catch(err => {
          this.$message.error('上传图片失败！请重新上传')
        })
      },
      beforeUpload(file) {
        const imageTypes = this.imageTypes
        let isImage = false
        for (let item of imageTypes) {
          if (file.name.includes(item)) {
            isImage = true
          }
        }
        if (!isImage) {
          this.$message.warning(`请上传格式为${imageTypes.join('、')}的图片！`)
          return Promise.reject()
        }

        return true
      },
      onEditorChange({ html }) {
        this.$emit('update:content', html)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .upload-col{
    height: 0;
    width: 0;
    overflow: hidden;
  }
</style>

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

此处是已封装代码
调用方式

// html
<quill-editor
  :content.sync="form.goodsDetail"
  :uploadImageParam="editorUploadImageData"
/>

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

components: {
    quillEditor
  },

原生input

返璞归真试试原生

<template>
  <div>
    <quill-editor 
      ref="quill-editor" 
      v-model="content" 
      :options="options" 
      @change="onEditorChange($event)"
      style="width:100%;height:100%;" />
    <div class="upload-col">
      <input
      class="quill-editor__uploadBtn"
      style="display: none !important;"
      @change="uploadSuccess"
      multiple="multiple"
      accept="image/jpeg, image/jpg, image/png"
      type="file"
      ref="referenceUpload"
      >
    </div>
  </div>
</template>
<script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import {
    quillEditor
  } from 'vue-quill-editor'
  /**
   * 富文本
   * content 内容
   * options 参数配置
   * uploadImageParam 上传图片的参数
   * 
  */
  export default {
    props: {
      content: {
        type: String,
        required: true
      },
      options:{
        type:Object,
        default:()=>{
          return {
          placeholder: "请输入内容",
          modules: {
            toolbar: {
              container: [
                ['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']
              ],
              handlers: {
                'image': function (value) {
                  if (value) {
                    document.querySelector('.quill-editor__uploadBtn').click()
                  } else {
                    this.quill.format('image', false);
                  }
                }
              }
            }
          }
        }
        }
      },
      uploadImageParam:{
        type:Object,
        default:()=>{
          return {}
        }
      }
    },
    components: {
      quillEditor
    },
    methods: {
      uploadSuccess (e) { 
        const that = this
        const getImages = async _ => {
          let f = function (i) {
            let param = new FormData()
            param.append('file', e.target.files[i])
            for (let key in that.uploadImageParam) {
              param.append(key, that.uploadImageParam[key])
            }
            return that.$http.uploadImage(param).then(({ data }) => {
              if (data.code === 200) {
                const quill = that.$refs['quill-editor'].quill
                ,length = quill.getSelection().index
                quill.insertEmbed(length, 'image', data.rows)
                quill.setSelection(length + 1)
              }
            }).catch(err => {
              console.log(err)
            })
          }
          for (let i = 0; i < e.target.files.length; i++) {
            await f(i)
          }
          this.$refs.referenceUpload.value = null
        }
        getImages()
      },
      onEditorChange({ html }) {
        this.$emit('update:content', html)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .upload-col{
    height: 0;
    width: 0;
    overflow: hidden;
  }
</style>

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

总结

举一反三，此处类型也可试用与仅上传图片。多试试 生命在于折腾