2018-01-13 发布

vue-quill-editor-upload : 实现vue-quill-editor上传图片到服务器

install

• npm

  npm install vue-quill-editor-upload --save

基本使用

<template>
  <!-- bidirectional data binding（双向数据绑定） -->
  <quill-editor v-model="content"
                ref="myQuillEditor"
                :options="editorOption">
  </quill-editor>
</template>

<script>
  import {quillRedefine} from 'vue-quill-editor-upload'
  import {quillEditor} from 'vue-quill-editor'
  export default {
    components: {quillEditor, quillRedefine},
    data () {
      return {
        content: '',
        editorOption: {}  // 必须初始化为对象 init  to Object
      }
    },
    created () {
      this.editorOption = quillRedefine(
        {
          // 图片上传的设置
          uploadConfig: {
            action: '',  // 必填参数 图片上传地址
            // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
            // 你必须把返回的数据中所包含的图片地址 return 回去
            res: (respnse) => {
              return respnse.info
            },
            name: 'img'  // 图片上传参数名
          }
        }
      )
      console.log(this.editorOption)
    }
  }
</script>

use

You have to install vue-quill-editor first.

请确保您已安装了 vue-quill-editor

• import

  import {quillRedefine} from ‘vue-quill-editor-upload’

quillRedefine是一个函数

quillRedefine 可接收的所有参数(all params)

{
          // 图片上传的设置
          uploadConfig: {
            action: '',  // 必填参数 图片上传地址
            // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
            // 你必须把返回的数据中所包含的图片地址 return 回去
            res: (respnse) => {
              return respnse.info
            },
            methods: 'POST',  // 可选参数 图片上传方式  默认为post
            token: sessionStorage.token,  // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
            name: 'img',  // 可选参数 文件的参数名 默认为img
            size: 500,  // 可选参数   图片限制大小，单位为Kb, 1M = 1024Kb
            accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon',  // 可选参数 可上传的图片格式
            // start: function (){}
            start: () => { },  // 可选参数 接收一个函数 开始上传数据时会触发
            end: () => { },  // 可选参数 接收一个函数 上传数据完成（成功或者失败）时会触发
            success: () => {},  // 可选参数 接收一个函数 上传数据成功时会触发
            error: () => { }  // 可选参数 接收一个函数 上传数据中断时会触发
          },
          // 以下所有设置都和vue-quill-editor本身所对应
          placeholder: '',  // 可选参数 富文本框内的提示语
          theme: '',  // 可选参数 富文本编辑器的风格
          toolOptions: [],  // 可选参数  选择工具栏的需要哪些功能  默认是全部
          handlers: {}  // 可选参数 重定义的事件，比如link等事件
}

• demo

first

you must to do: :options=“editorOption” to bound Parameters

你必须绑定option :options=“editorOption”

<template>
  <!-- bidirectional data binding（双向数据绑定） -->
  <quill-editor 
                :options="editorOption">
  </quill-editor>
</template>

second

return editorOption

必须在return 中书写editorOPtion 并且设置默认为空对象

 data () {
      return {
        content: '',
        editorOption: {}  // 必须初始化为对象 init  to Object
      }
    }

three

init in created

在created生命周期中生成实际数据

created () {
      this.editorOption = quillRedefine(
        {
          // 图片上传的设置
          uploadConfig: {
            action:  '',  // 必填参数 图片上传地址
            // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
            // 你必须把返回的数据中所包含的图片地址 return 回去
            res: (respnse) => {
              return respnse.info  // 这里切记要return回你的图片地址
            }
          }
        }
      )
     // console.log(this.editorOption)
    }

注意事项 （matters need attention）

由于不同的用户的服务器返回的数据格式不尽相同

因此

在uploadConfig中，你必须如下操作

 // 你必须把返回的数据中所包含的图片地址 return 回去
 res: (respnse) => {
    return respnse.info  // 这里切记要return回你的图片地址
 }

比如你的服务器返回的成功数据为

{
code: 200,
starus: true,
result: {
    img: 'http://placehold.it/100x100' // 服务器返回的数据中的图片的地址
 }
}

那么你应该在参数中写为：

 // 你必须把返回的数据中所包含的图片地址 return 回去
 res: (respnse) => {
    return respnse.result.img  // 这里切记要return回你的图片地址
 }

example

完整用例

<template>
  <!-- bidirectional data binding（双向数据绑定） -->
  <quill-editor v-model="content"
                ref="myQuillEditor"
                :options="editorOption">
  </quill-editor>
</template>

<script>
  import {quillRedefine} from 'vue-quill-editor-upload'
  import {quillEditor} from 'vue-quill-editor'
  export default {
    components: {quillEditor, quillRedefine},
    data () {
      return {
        content: '',
        editorOption: {}  // 必须初始化为对象 init  to Object
      }
    },
    created () {
      this.editorOption = quillRedefine(
        {
          // 图片上传的设置
          uploadConfig: {
            action: '',  // 必填参数 图片上传地址
            // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
            // 你必须把返回的数据中所包含的图片地址 return 回去
            res: (respnse) => {
              return respnse.info
            },
            methods: 'POST',  // 可选参数 图片上传方式  默认为post
            token: sessionStorage.token,  // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
            name: 'img',  // 可选参数 文件的参数名 默认为img
            size: 500,  // 可选参数   图片限制大小，单位为Kb, 1M = 1024Kb
            accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon',  // 可选参数 可上传的图片格式
            // start: function (){}
            start: () => {
            },  // 可选参数 接收一个函数 开始上传数据时会触发
            end: () => {
            },  // 可选参数 接收一个函数 上传数据完成（成功或者失败）时会触发
            success: () => {
            },  // 可选参数 接收一个函数 上传数据成功时会触发
            error: () => {
            }  // 可选参数 接收一个函数 上传数据中断时会触发
          },
          // 以下所有设置都和vue-quill-editor本身所对应
          placeholder: '',  // 可选参数 富文本框内的提示语
          theme: '',  // 可选参数 富文本编辑器的风格
          toolOptions: [],  // 可选参数  选择工具栏的需要哪些功能  默认是全部
          handlers: {}  // 可选参数 重定义的事件，比如link等事件
        }
      )
      console.log(this.editorOption)
    }
  }
</script>

---

上面的代码是我从别的地方搬过来的 下面的代码是我的 可以根据我的代码结合一块看

我认为最重要的一点就是母吆盲目的复制粘贴,因为开发人员写不出来就会急躁,故要将该考虑的都考虑到然后进行操作

<template>
    <div id="articleAdd">
        <div class="search">
            <el-form  label-width="80px">
                <el-form-item label="标题">
                    <el-input clearable placeholder="请输入标题" v-model="form.title"></el-input>
                </el-form-item>

                <el-form-item label="作者">
                    <el-input clearable="clearable" placeholder="请输入作者" v-model="form.author"></el-input>
                </el-form-item>

                <el-form-item label="权重">
                    <el-input clearable="clearable" placeholder="请输入权重" v-model="form.sort"></el-input>
                </el-form-item>

                <el-form-item label="封面">
                    <el-upload class="upload-demo" :action="uploadUrl" :data="prefix" :file-list="coverBox"
                        :on-remove="handleRemove" :on-success="handleAvatarSuccess"
                        list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="上传类型">
                    <el-radio-group v-model="upLoadType">
                        <el-radio :label="1">上传链接</el-radio>
                        <el-radio :label="2">上传文章</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
            
        </div>

        <!-- 图片上传组件辅助-->
        <el-upload
            class="avatar-uploader"
            :action="uploadUrl" type="drag"
            :data="prefix"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="beforeUpload">
        </el-upload>

        <el-form  label-width="80px">
        <!--富文本编辑器组件-->
            <el-form-item label="上传地址" v-if="upLoadType == 1">
                <el-input clearable placeholder="请输入上传地址" v-model="form.url"></el-input>
            </el-form-item>

            <el-form-item label="上传内容" v-if="upLoadType == 2" v-loading="uillUpdateImg">
                <quill-editor
                    v-model="form.content"
                    ref="myQuillEditor"
                    :options="editorOption"
                    @focus="onEditorFocus($event)"
                    @change="onEditorChange($event)">
                </quill-editor>
            </el-form-item>
        </el-form>

        <el-button type="primary" class="subMit" @click="submitBtn" 
            :disabled="!(Boolean(form.title) && Boolean(form.author) && Boolean(form.cover) && Boolean(form.sort))">提交</el-button>
        <!-- <div class="ql-container ql-snow">
            <div class="ql-editor">
                <div v-html="detailContent"></div>
            </div>
        </div> -->
    </div>
</template>
<script>
    import { subBtnFn, getInfoFn } from 'api/game/find/articleAdd';
    import { toolbarOptions } from 'api/game/find/toolbarOptions'; // 工具栏配置
    import { quillEditor } from "vue-quill-editor"; //调用编辑器
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';

    export default {
        components: { quillEditor }, // 注册组件
        data() {
            return {
                uillUpdateImg: false,
                uploadUrl: undefined,
                coverBox: [],
                prefix: {prefix: 'contest'}, // 阿里云额外参数
                upLoadType: 1, // 1为 URL  2为内容
                form: {
                    id: undefined, // 文章id
                    moduleId: undefined, // 模块id
                    title: undefined, // 标题
                    author: undefined, // 作者
                    cover: undefined, // 封面
                    status: 1, // 状态 1：封禁 、2：正常
                    sort: undefined,  // 权重
                    url: undefined,   // 链接地址
                    content: undefined, // 正文内容
                },
                editorOption: {
                    theme: 'snow',  // or 'bubble'
                    modules: {
                        toolbar: {
                            container: toolbarOptions,  // 工具栏
                            handlers: {
                                'image': function (value) {
                                    if (value) {
                                        // 触发input框选择图片文件
                                        document.querySelector('.avatar-uploader input').click()
                                    } else {
                                        this.quill.format('image', false);
                                    }
                                }
                            }
                        }
                    }
                },
            }
        },
        created () {
            this.uploadUrl = this.defaultUploadUrl;
            if (this.$route.query){ // 判断是否有值
                this.form.moduleId = this.$route.query.moduleId;
                if (this.$route.query.id) { // 判断是否为编辑
                    this.form.id = this.$route.query.id;
                    this.getData();
                }
            }
        },
        methods: {
            getData() {
                this.coverBox = []
                getInfoFn({ id: this.form.id }).then(res=>{
                    if (res.code == 0) {
                        this.form = {...res.data};
                        if (res.data.url) { // 1为 URL  2为内容
                            this.upLoadType = 1;
                        } else {
                            this.upLoadType = 2;
                        }
                        this.coverBox.push({url: res.data.cover, name: res.data.cover})
                    } else {
                        this.$message.error( res.message );
                    }
                })
            },

            // 获得焦点事件
            onEditorFocus(e){ this.lenIndex = e.getSelection().index; },
            // 内容改变事件
            onEditorChange(e){ this.lenIndex = e.quill.getSelection().index; },
            escapeStringHTML(str) {  // 转码
                str = str.replace(/</g,'<');
                str = str.replace(/>/g,'>');
                return str;
            },
            /* handleSingleSuccess (res, file) { // res为图片服务器返回的数据
                let quill = this.$refs.myQuillEditor.quill; // 获取富文本组件实例
                if (res.code == '0') {
                    // 插入图片  res.info为服务器返回的图片地址
                    quill.insertEmbed(this.lenIndex, 'image', res.data)
                    // 调整光标到最后
                    quill.setSelection(this.lenIndex + 1)
                } else {
                    this.$message.error('图片插入失败')
                }
                this.quillUpdateImg = false;  // loading动画消失
            }, */


            // 富文本图片上传前
            beforeUpload() { this.quillUpdateImg = true; },
            uploadSuccess(res, file) {  // res为图片服务器返回的数据
                let quill = this.$refs.myQuillEditor.quill;
                if (res.code == 0) {
                    let length = quill.getSelection().index; // 获取光标所在位置
                    quill.insertEmbed(length, 'image', res.data); // 插入图片  res.info为服务器返回的图片地址
                    quill.setSelection(length + 1); // 调整光标到最后
                } else {
                    this.$message.error('图片插入失败')
                }
                this.quillUpdateImg = false; // loading动画消失
            },
            // 富文本图片上传失败
            uploadError() {
                // loading动画消失
                this.quillUpdateImg = false;
                this.$message.error('图片插入失败');
            },
            submitBtn() {
                if (this.upLoadType == 1) { // 1为 URL  2为内容
                    this.form.content = undefined;
                    if (!this.form.url) {
                        this.$message.error({ message: '请填写您要上传的数据!' });
                        return;
                    }
                } else {
                    this.form.url = undefined;
                    if (!this.form.content) {
                        this.$message.error({ message: '请填写您要上传的数据!' });
                        return;
                    }
                }
                subBtnFn({...this.form}).then(res => {
                    if (res.code == 0) {
                        this.$message({ showClose: true, message: '数据添加成功,即将进行跳转', type: 'success' });
                        setTimeout(() => {
                            this.$router.push({
                                path: '/find/articleManage',
                                query:{
                                    copywritingId: this.form.moduleId
                                }
                            });
                        }, 1500);
                    }
                })
            },
            // 封面上传
            handleAvatarSuccess(res, file) { this.form.cover = res.data; },
            handleRemove (file, fileList) { this.edit.cover = ''; },
        },
    }

</script>
<style>
    #articleAdd {
        margin: 30px;
    }

    #articleAdd .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    #articleAdd .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    #articleAdd .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    #articleAdd .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    #articleAdd .subMit {
        /* float: right; */
        margin: 20px 0;
    }
</style>

我直接将代码贴过来了, template中的代码应该可以看懂,style中的就不要说了,script中的注释我也写了,如果还是看不懂 可以加我 QQ: 2489757828

个人博客:博客