vue pages 多入口项目 + chainWebpack 全局引用缩写说明

结合vue+element-ui+vue-quill+editor二次封装成组件

1.图片上传

分析原因

项目中使用vue-quill-editor富文本编辑器,在编辑内容的时候,我们往往会编辑图片,而vue-quill-editor默认的处理方式是直接将图片转成base64格式,导致上传的内容十分庞大,且服务器接受post的数据的大小是有限制的,很有可能就提交失败,造成用户体验差。

引入element-ui

编辑editor.vue文件

<template>
  <div>
    <!-- 图片上传组件辅助-->
    <el-upload
      class="avatar-uploader"
      action=""
      accept="image/jpg, image/jpeg, image/png, image/gif"
      :http-request="upload"
      :before-upload="beforeUploadImg"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :show-file-list="false">
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>
<script>
  import axios from '@/API/';
 import { quillEditor } from "vue-quill-editor";
 import COS from "cos-js-sdk-v5";
 import Upload from '@/components/Upload.vue';
 import { addQuillTitle } from '../utils/quill-title.js';

 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
 
  export default {
    data() {
      return {
      }
    },
    methods: {
      // 上传图片前
      beforeUpload(res, file) {
       const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg' 
     const isLt1M = file.size / 1024 / 1024 < 1
     if (!isJPG) {
       this.$message.error('支持JPG、PNG格式的图片,大小不得超过1M')
     }
     if (!isLt1M) {
       this.$message.error('文件最大不得超过1M')
     } 
     return isJPG && isLt1M
      },
      // 上传图片成功
      uploadSuccess(res, file) {},
      // 上传图片失败
      uploadError(res, file) {},
      // 上传图片处理过程
      upload(req){}
    }
  }
</script>

在editor.vue中引入vue-quill-editor

<template>
  <div>
    <!-- 图片上传组件辅助-->
    <el-upload
      class="avatar-uploader"
      action=""
      accept="image/jpg, image/jpeg, image/png, image/gif"
      :http-request="upload"
      :before-upload="beforeUploadImg"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :show-file-list="false">
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <quill-editor 
      class="info-editor" 
      v-model="content" 
      ref="QuillEditor" 
      :options="editorOption" 
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)">
    </quill-editor>
  </div>
</template>
<script>
  import axios from '@/API/';
 import { quillEditor } from "vue-quill-editor";
 import COS from "cos-js-sdk-v5";
 import Upload from '@/components/Upload.vue';
 import { addQuillTitle } from '../utils/quill-title.js';

 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";

  // 工具栏配置
  const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],    // toggled buttons
  ['blockquote', 'code-block'],

  [{'header': 1}, {'header': 2}],        // custom button values
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'script': 'sub'}, {'script': 'super'}],   // superscript/subscript
  [{'indent': '-1'}, {'indent': '+1'}],     // outdent/indent
  [{'direction': 'rtl'}],             // text direction

  [{'size': ['small', false, 'large', 'huge']}], // custom dropdown
  [{'header': [1, 2, 3, 4, 5, 6, false]}],

  [{'color': []}, {'background': []}],     // dropdown with defaults from theme
  [{'font': []}],
  [{'align': []}],
  ['link', 'image', 'video'],
  ['clean']                     // remove formatting button
 ]

  export default {
    data() {
      return {
       editorOption: {
       placeholder: '请输入编辑内容',
       theme: 'snow', //主题风格
       modules: {
        toolbar: {
        container: toolbarOptions, // 工具栏
        handlers: {
         'image': function (value) {
         if (value) {
          document.querySelector('#quill-upload input').click()
         } else {
          this.quill.format('image', false);
         }
         }
        }
        }
       }
       }, // 富文本编辑器配置
       content: '', //富文本内容
      }
    },
    methods: {
      // 上传图片前
      beforeUpload(res, file) {
       const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg' 
     const isLt1M = file.size / 1024 / 1024 < 1
     if (!isJPG) {
       this.$message.error('支持JPG、PNG格式的图片,大小不得超过1M')
     }
     if (!isLt1M) {
       this.$message.error('文件最大不得超过1M')
     } 
     return isJPG && isLt1M
      },
      // 上传图片成功
      uploadSuccess(res, file) {
       let quill = this.$refs.QuillEditor.quill;
       let length = quill.getSelection().index;
       quill.insertEmbed(length, 'image', url);
       quill.setSelection(length+1)
      },
      // 上传图片失败
      uploadError(res, file) {
        this.$message.error('图片插入失败')
      },
      // 上传图片处理过程
      upload(req){}
    }
  }
</script>

<style scoped>
.avatar-uploader{
 display: none;
}
</style>

vue pages 多入口项目 + chainWebpack 全局引用缩写说明

扫一扫手机访问