Vue搭配富文本WangEditor3.1.1實現直傳圖片(視頻)到OSS

時間 2019-11-10

標籤 vue 搭配文本 wangeditor3.1.1 wangeditor 實現圖片視頻 oss 简体版

原文原文鏈接

感謝

首先要感謝網上一些大佬分享的部分代碼給個人工做提供了一些參考，讓我可以把有效的代碼整合到一塊兒，實現想要的功能，在這裏與你們分享！感謝！

功能截圖

富文本添加圖片保存到OSS也是這幾天項目中剛剛遇到的，前期沒怎麼想下決心搞一搞，說實話呢也是不會搞，今天呢終因而一點一點的給整了出來，在這裏呢與你們分享一下，網上可能有一些Vue整合Wangeditor上傳圖片的文章，你們呢能夠參考着看！廢話很少說，直接上項目

項目參考

碼雲地址css

項目結構解析與部分代碼展現

必要的靜態文件

wangeditor編輯器搭建 npm先下載就不用說了吧

<template lang="html">
  <div class="editor">
    <div ref="toolbar" class="toolbar">
    </div>
    <div ref="editor" class="text">
    </div>
  </div>
</template>

<script>
import E from 'wangeditor'
import {UPLOADER} from '@t/utils'
export default {
    name: 'Editorbar',
    data() {
        return {
            editor: null,
            info_: null,
            UPLOADER,
        }
    },
    model: {
        prop: 'value',
        event: 'change',
    },
    props: {
        value: {
            type: String,
            default: '',
        },
        isClear: {
            type: Boolean,
            default: false,
        },
    },
    watch: {
        isClear(val) {
            // 觸發清除文本域內容
            if (val) {
                this.editor.txt.clear()
                this.info_ = null
            }
        },
        value(val) {
            // 使用 v-model 時,設置初始值
            this.editor.txt.html(val)
        },
    },
    mounted() {
        this.seteditor()
        this.editor.config.customUploadInit = this.UPLOADER(this.editor).init()
    },
    methods: {
        seteditor() {
            this.editor = new E(this.$refs.toolbar, this.$refs.editor)
            // 配置菜單
            this.editor.customConfig.menus = [
                'head', // 標題
                'bold', // 粗體
                'fontSize', // 字號
                'fontName', // 字體
                'italic', // 斜體
                'underline', // 下劃線
                'strikeThrough', // 刪除線
                'foreColor', // 文字顏色
                'backColor', // 背景顏色
                'link', // 插入連接
                'list', // 列表
                'justify', // 對齊方式
                'quote', // 引用
                'emoticon', // 表情
                'image', // 插入圖片
                'table', // 表格
                // 'video', // 插入視頻
                'code', // 插入代碼
                'undo', // 撤銷
                'redo', // 重複
            ]

            this.editor.customConfig.onchange = html => {
                this.info_ = html // 綁定當前逐漸地值
                this.$emit('change', this.info_) // 將內容同步到父組件中
            }

            // 建立富文本編輯器
            this.editor.create()
        },
    },
}
</script>

<style lang="css">
.editor {
    width: 80%;
    margin: 0 auto;
}
.toolbar {
    border: 1px solid #ccc;
}
.text {
    border: 1px solid #ccc;
    height: 500px;
}
</style>

上傳OSS方法的封裝

const OSSConfig = {
    ossParams: {
        key: '', // key後面有用，先默認設空字符串
        success_action_status: '200', // 默認200
        accessKeyId: '你的KeyID',
        accessKeySecret: '你的Key',
        bucket: 'Bucket',
        host: 'OSS上傳地址',
    },
}

var g_object_name, new_multipart_params, suffix

// ==========================================================這一串是爲了文件的名字👇====================================================//
function random_string(len) {
    len = len || 32
    var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
    var maxPos = chars.length
    var pwd = ''
    for (let i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos))
    }
    return pwd
}

function get_suffix(filename) {
    let pos = filename.lastIndexOf('.')
    let fname = ''
    if (pos != -1) {
        fname = filename.substring(pos)
    }
    return fname
}

function calculate_object_name(filename) {
    suffix = get_suffix(filename)
    g_object_name = OSSConfig.ossParams.key + random_string(20) + suffix
    return ''
}

function set_upload_param(up, filename, ret) {
    g_object_name = OSSConfig.ossParams.key
    if (filename != '') {
        suffix = get_suffix(filename)
        calculate_object_name(filename)
    }
    var policyText = {
        expiration: '2020-01-01T12:00:00.000Z', //設置該Policy的失效時間，超過這個失效時間以後，就沒有辦法經過這個policy上傳文件了
        conditions: [
            ['content-length-range', 0, 1048576000], // 設置上傳文件的大小限制
        ],
    }
    var policyBase64 = Base64.encode(JSON.stringify(policyText))
    let message = policyBase64
    var bytes = Crypto.HMAC(Crypto.SHA1, message, OSSConfig.ossParams.accessKeySecret, {asBytes: true})
    var signature = Crypto.util.bytesToBase64(bytes)
    new_multipart_params = {
        key: g_object_name,
        policy: policyBase64,
        OSSAccessKeyId: OSSConfig.ossParams.accessKeyId,
        success_action_status: 200, //讓服務端返回200,否則，默認會返回204
        bucket: OSSConfig.ossParams.bucket,
        signature: signature,
    }

    up.setOption({
        url: OSSConfig.ossParams.host,
        multipart_params: new_multipart_params,
    })

    up.start()
}
// ==========================================================這一串是爲了文件的名字👆====================================================//

var UPLOADER = editor => {
    let uploader = new plupload.Uploader({
        runtimes: 'html5,flash,silverlight,html4',
        browse_button: editor.imgMenuId,
        multi_selection: true,
        auto_start: true,
        // 我也不知道這是幹啥的 之後慢慢研究，註釋掉卻是沒啥影響
        // flash_swf_url: '../../public/lib/plupload-2.1.2/js/Moxie.swf',
        // silverlight_xap_url: '../../public/lib/plupload-2.1.2/js/Moxie.xap',
        url: OSSConfig.ossParams.host,

        filters: {
            mime_types: [
                //只容許上傳圖片和zip,rar文件
                {title: 'Image files', extensions: 'jpg,jpeg,gif,png,bmp'},
                {title: 'video files', extensions: 'mp4,3gp'},
            ],
            max_file_size: '10mb', //最大隻能上傳10mb的文件
            prevent_duplicates: false, //不容許選取重複文件
        },

        init: {
            PostInit: function() {
                set_upload_param(uploader, '', false)
                return false
            },

            BeforeUpload: function(up, file) {
                set_upload_param(up, file.name, true)
            },

            FilesAdded: function(up) {
                up.start() //選擇完後直接上傳
            },

            FileUploaded: function(up, file, info) {
                if (info.status == 200) {
                    var file_type = file.type
                    var is_image = file_type.indexOf('image')
                    var is_video = file_type.indexOf('video')
                    if (is_image > -1) {
                        editor.cmd.do(
                            'insertHtml',
                            '<img src="' +
                                OSSConfig.ossParams.host +
                                '/' +
                                g_object_name +
                                '" style="width: auto; max-width:100%;"/>',
                        )
                    }

                    // if (is_video > -1) {
                    //     editor.cmd.do(
                    //         'insertHtml',
                    //         '<video controls src="' +
                    //             _this.ossParams.host +
                    //             _this.g_object_name +
                    //             '" style="width: auto; max-width:100%;"></video>',
                    //     )
                    // }
                } else {
                    alter(info.response)
                }
            },

            Error: function(up, err) {
                if (err.code == -600) {
                    alter('\n選擇的文件太大了,能夠根據應用狀況，在upload.js 設置一下上傳的最大大小')
                } else if (err.code == -601) {
                    alter('\n選擇的文件後綴不對,能夠根據應用狀況，在upload.js進行設置可容許的上傳文件類型')
                } else if (err.code == -602) {
                    alter('\n這個文件已經上傳過一遍了')
                } else {
                    alter('\nError xml:' + err.response)
                }
            },
        },
    })
    return uploader
}

export {UPLOADER}

調用

mounted() {
        this.seteditor()
        this.editor.config.customUploadInit = this.UPLOADER(this.editor).init()
    },

總結

整個東西呢歷時幾個小時，代碼沒作太多的優化，但願你們能夠提示寶貴意見~謝謝！html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。