vue-quill-editor 自定义图片上传至OSS

第一步：安装vue-quill-editor

npm install vue-quill-editor --save

第二步：在main.js文件中加入

import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor);
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'

第五步：编写上传到OSS的组件

<template> 
  <div>
    <!--
    http://college-jifeng.oss-cn-beijing.aliyuncs.com : OSS的地址
    -->
<!--    上传组件-->
    <el-upload
      action="http://college-jifeng.oss-cn-beijing.aliyuncs.com"
      :data="dataObj"
      list-type="picture"
      :multiple="false" :show-file-list="showFileList"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess"
      :on-preview="handlePreview">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
    </el-upload>
<!--    图片反显区域-->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="fileList[0].url" alt="">
    </el-dialog>
  </div>
</template>
<script>
  import {
   policy} from './policy'
  import {
   getUUID} from '@/utils'

  export default {
   
    name: 'singleUpload',
    props: {
   
      value: String
    },
    computed: {
   
        // 返回图片路径
      imageUrl () {
   
        return this.value
      },
        // 返回图片名称
      imageName () {
   
        if