vue、vue-quill-editor、七牛上传图片

2019-09-13 admin

clipboard.png

原理: 1、监听quill富文本编辑器图片点击事件 2、新建一个辅助上传输入框并隐藏 <input type = “file” id=“myupload” @change=“uploadImg” v-show=“false” /> 3、当单机quill添加图片的时候触发辅助文件输入框打开文件上传窗口,这样就可以获取到File对象,在上传的时候使用 4、七牛上传需要 file, key, token(从后台获取)。上传成功以后,会返回一个对象,{hash: ‘’, key: ‘’}我们需要拼接图片地址然后显示到quill中。图片地址 七牛上传地址+key ** 下面代码就可以修改quill中的图片地址

let quill = this.$refs.myQuillEditor.quill
          let length = quill.getSelection().index
          // 插入图片  res.info为服务器返回的图片地址
          quill.insertEmbed(length, 'image', 'https://qiniutest.tech/' + complete.key)
          // 调整光标到最后
          quill.setSelection(length + 1)

**

<template>
  <div id='quillEditorQiniu'>
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @change="onEditorChange($event)"
    >
    </quill-editor>
    <!--辅助-->
    <!-- <input type="file" id="myUpload" @change="uploadImg" v-show="false"> -->
    <!--这里用的是elementui的上传辅助,其实和input type="file"是一样的都是为了获取File对象-->
    <el-upload
      class="avatar-uploader"
      :action="'https://qiniutest.tech/'"
      name="img"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload"
    >
    </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'
import * as qiniu from 'qiniu-js'
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  [{'color': []}],
  ['link', 'image']
]
// 自定义编辑器的工作条
export default {
  components: {
    quillEditor
  },
  mounted () {
    // 这里是从后台接口获取的七牛上传所需要的token
    this.$store.dispatch('uploadToken')
    // 工具栏中的图片图标被单击的时候调用这个方法打开上传窗口
    let imgHandler = function (state) {
      if (state) {
        document.querySelector('.avatar-uploader input').click()
      }
    }
    // 当工具栏中的图片图标被单击的时候
    this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', imgHandler)
  },

下面是封装组件的代码 QuillEditorQiniu.vue

<template>
  <div id='quillEditorQiniu'>
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @change="onEditorChange($event)"
    >
    </quill-editor>
    <!--辅助-->
    <!-- <input type="file" id="myUpload" @change="uploadImg" v-show="false"> -->
    <el-upload
      class="avatar-uploader"
      :action="'https://qiniutest.tech/'"
      name="img"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload"
    >
    </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'
import * as qiniu from 'qiniu-js'
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  [{'color': []}],
  ['link', 'image']
]
// 自定义编辑器的工作条
export default {
  components: {
    quillEditor
  },
  mounted () {
    this.$store.dispatch('uploadToken')
    // 工具栏中的图片图标被单击的时候调用这个方法
    let imgHandler = function (state) {
      if (state) {
        document.querySelector('.avatar-uploader input').click()
      }
    }
    // 当工具栏中的图片图标被单击的时候
    this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', imgHandler)
  },
  data () {
    return {
      content: '',
      editorOption: {
        placeholder: '请输入',
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions
          }
        }
      }
    }
  },
  methods: {
    onEditorChange (event) {
      console.log(event, 'change')
      this.$emit('getEditorInfo', event)
    },
    beforeUpload (request, file) {
      var observable = qiniu.upload(request, request.name, this.$store.state.upload_token)
      observable.subscribe({
        next (res) {
          console.log(res, 'r')
        },
        error (error) {
          console.log(error)
        },
        complete: (complete) => {
          console.log(complete, 'c')
          let quill = this.$refs.myQuillEditor.quill
          let length = quill.getSelection().index
          // 插入图片  res.info为服务器返回的图片地址
          quill.insertEmbed(length, 'image', 'https://qiniutest.tech/' + complete.key)
          // 调整光标到最后
          quill.setSelection(length + 1)
        }
      })
    },
    // 上传图片成功
    uploadSuccess (res, file) {
      // file 返回的文件信息,也可以在这里调用七牛上传。
      console.log(file, 'success')
    },
    // 上传图片失败
    uploadError (res, file) {
      console.log(res, file, 'error')
    }
  }
}
</script>

<style scoped>
</style>

[转载]原文链接:https://segmentfault.com/a/1190000020378617

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-75028.html

文章标题:vue、vue-quill-editor、七牛上传图片

相关文章
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: &lt;form id=&quot;form&quot; method=&quot;post&quot; action=&quot;http:&#x2...
2017-03-06
纯JS实现旋转图片3D展示效果
CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
图片优化的那些工具
图片作为页面的一个主要因素,它的大小直接影响了页面的加载速度,这一点在移动端尤显突出。 怎么让图片的大小更小?除了选择合适的格式(jpeg、gif、png),我们还可以利用网上的应用(如smushit、tinypng、imagemin、im...
2016-01-13
回到顶部