vue开发----使用el-upload组件在vue-quill-editor组件工具栏中添加文件上传

先上一个最终的效果图：
如图：上面是quill-editor组件，下面是el-upload组件。
上代码：
<template>
    <div class="my-container">
        <!--quill组件用div包裹起来是为了更方便的根据项目要求修改组件的样式，下同-->
        <div class="my-quill">
            <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption">
            </quill-editor>
        </div>
        <!--el-upload组件仅用于展示上传的文件以及删除文件操作，不需要过多的配置其他参数-->
        <div class="my-upload">
            <el-upload multiple ref="upload" action="" accept=".pdf" :before-remove="handleBeforeRemove" :file-list="fileList"></el-upload>
        </div>
    </div>
</template>

<script>
//使用quill-editor记得引入相关css文件，要不然样式会有问题
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 {
    name: 'myProject',
    components: {
        quillEditor
    },
    mounted () {
        //quill里面的工具栏的样式名是ql-toolbar
        const toolbar = document.querySelector('.ql-toolbar');
        toolbar.title = '上传PDF格式附件';
        let formats = document.createElement('span');
        formats.classList.add('ql-formats');
        toolbar.appendChild(formats);
        //设置inputContainer节点与fileInput节点的style是为了隐藏input节点，实现点击图标上传文件
        let inputContainer = document.createElement('span');
        inputContainer.style = 'position: relative;display: inline-block;overflow: hidden;';
        //创建i节点，添加class,设置图标
        let fileIcon = document.createElement('i');
        fileIcon.classList.add('el-icon-document');
        //创建input节点并设置相关属性
        let fileInput = document.createElement('input');
        fileInput.setAttribute('id', 'files');
        fileInput.setAttribute('type', 'file');
        fileInput.setAttribute('accept', '.pdf');
        fileInput.style = 'position: absolute;right: 0px;top: 0px;opacity: 0;';
        //添加change事件，其他HTML DOM事件请参阅：http://www.runoob.com/jsref/dom-obj-event.html
        fileInput.addEventListener('change', async () => {
            //做文件上传的操作
            /**
             * 这
             * 里
             * 都
             * 是
             * 代
             * 码
             */
            fileInput.value = null;//最后要将input选择的值置为null，要不然重复选择同一文件是不会触发此方法
        }, false);
        formats.appendChild(inputContainer);
        inputContainer.appendChild(fileIcon);
        inputContainer.appendChild(fileInput);
    },
    data () {
        return {
            content: ``,//quill-editor的内容
            editorOption: {
                modules: {
                    toolbar: {//quill-editor的工具栏配置
                        container: [
                            ['bold', 'italic', 'underline']
                        ]
                    }
                }
            },
            fileList: []
        };
    },
    methods: {
        handleBeforeRemove (file, fileList) {
            //做删除确认操作
            /**
             * 这
             * 里
             * 都
             * 是
             * 代
             * 码
             */
            return false;//删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。
        }
    },
    computed: {
        editor () {
            return this.$refs.myQuillEditor.quill;
        }
    }
};
</script>

<style scoped lang="scss">
    .my-container {
        padding: 20px;
        .my-quill {
            margin: 16px 0 25px;
        }
        //更改组件里的样式需要这样加 /deep/
        .my-quill /deep/ .ql-toolbar {
            background-color: $border-primary-color;
            border-radius: 8px 8px 0 0;
        }
        .my-quill /deep/ .ql-container {
            border-radius: 0 0 8px 8px;
            height: 250px;
        }
        .my-quill /deep/ .ql-editor {
            font-size: 16px;
        }
    }
</style>
vue开发----使用el-upload组件在vue-quill-editor组件工具栏中添加文件上传

猜你喜欢
