1.上傳本地圖片至oss并且回顯至富文本
先創(chuàng)建oss.js上傳/圖片/視頻接口
import request from '@/utils/re.js'? ?//封裝的請求
import axios from 'axios'
export function policy1() {
? return request({
? ? url:'url',//上傳接口
? ? method:'get',
? })
}
export function getUUID () {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
? return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
})
}
export function ossUpload (file,editor) {
? var that = this;
? return new Promise((resolve, reject) => {
? ? ? policy1().then((response) => {
? ? ? const formData = new FormData()
? ? ? formData.append('OSSAccessKeyId', response.data.accessKeyId)
? ? ? formData.append('policy', response.data.policy)
? ? ? formData.append('signature', response.data.signature)
? ? ? formData.append('key', response.data.dir +getUUID() +'_'+ file.name)
? ? ? formData.append('callback', response.data.callback)
? ? ? formData.append('file', file)
? ? ? formData.append('host',response.data.host)
? ? ? axios.post(response.data.host, formData).then((res) => {
? ? ? ? const { status } = res
? ? ? ? if (status === 200) {
? ? ? ? ? console.log('200',res)
? ? ? ? ? ? editor.cmd.do('insertHTML', `<img src=${res.data.data.filename} alt="">`)
? ? ? ? ? return res.data
? ? ? ? } else {
? ? ? ? }
? ? ? }).catch(err => {
? ? ? ? console.log(1111,err)
? ? ? })
? ? }).catch(err => {})
? })
}
創(chuàng)建wangEditor.vue組件
<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 { ossUpload } from '@/api/oss'
? export default {
? ? name: 'editor',
? ? data() {
? ? ? return {
? ? ? ? // uploadPath,
? ? ? ? editor: null,
? ? ? ? info_: null,
? ? ? ? ? menus: [
? ? ? ? ? 'head', // 標題
? ? ? ? ? 'bold', // 粗體
? ? ? ? ? 'fontSize', // 字號
? ? ? ? ? 'fontName', // 字體
? ? ? ? ? 'italic', // 斜體
? ? ? ? ? 'underline', // 下劃線
? ? ? ? ? 'strikeThrough', // 刪除線
? ? ? ? ? 'foreColor', // 文字顏色
? ? ? ? ? 'backColor', // 背景顏色
? ? ? ? ? 'link', // 插入鏈接
? ? ? ? ? 'list', // 列表
? ? ? ? ? 'justify', // 對齊方式
? ? ? ? ? 'quote', // 引用
? ? ? ? ? 'emoticon', // 表情
? ? ? ? ? 'image', // 插入圖片
? ? ? ? ? 'table', // 表格
? ? ? ? ? 'video', // 插入視頻
? ? ? ? ? 'code', // 插入代碼
? ? ? ? ? 'undo', // 撤銷
? ? ? ? ? 'redo', // 重復
? ? ? ? ? 'fullscreen' // 全屏
? ? ? ? ? ? ? ? ]
? ? ? }
? ? },
? ? model: {
? ? ? prop: 'value',
? ? ? event: 'change'
? ? },
? ? props: {
? ? ? value: {
? ? ? ? type: String,
? ? ? ? default: ''
? ? ? },
? ? ? isClear: {
? ? ? ? type: Boolean,
? ? ? ? default: false
? ? ? }
? ? },
? ? watch: {
? ? ? isClear(val) {
? ? ? ? // 觸發(fā)清除文本域內容
? ? ? ? if (val) {
? ? ? ? ? this.editor.txt.clear()
? ? ? ? ? this.info_ = null
? ? ? ? }
? ? ? },
? ? ? value: function(value) {
? ? ? ? if (value !== this.editor.txt.html()) {
? ? ? ? ? this.editor.txt.html(this.value)
? ? ? ? }
? ? ? }
? ? ? //value為編輯框輸入的內容丑掺，這里我監(jiān)聽了一下值斟湃，當父組件調用得時候，如果給value賦值了案训，子組件將會顯示父組件賦給的值
? ? },
? ? mounted() {
? ? ? this.seteditor()
? ? ? this.editor.txt.html(this.value)
? ? },
? ? methods: {
? ? ? seteditor() {
? ? ? ? this.editor = new E(this.$refs.toolbar, this.$refs.editor);
? ? ? ? this.editor.customConfig = this.editor.customConfig ? this.editor.customConfig : this.editor.config;
? ? ? ? this.editor.customConfig.customUploadImg = async (files, insert) => {
? ? ? ? ? ? ? ? ? const res = await ossUpload(files[0],this.editor)
? ? ? ? ? ? ? ? }
? ? ? ? this.editor.customConfig.menus = this.menus;
? ? ? //連接
? ? ? this.editor.customConfig.linkCheck = function (text, link) {
? ? ? ? ? console.log("插入的文字",text) // 插入的文字
? ? ? ? ? console.log("插入的鏈接",link) // 插入的鏈接
? ? ? ? ? return true // 返回 true 表示校驗成功
? ? ? },
? ? ? ? this.editor.customConfig.onchange = (html) => {
? ? ? ? ? this.info_ = html // 綁定當前逐漸地值
? ? ? ? ? this.$emit('change', this.info_) // 將內容同步到父組件中
? ? ? ? }
? ? ? ? // 創(chuàng)建富文本編輯器
? ? ? ? this.editor.create()
? ? ? }
? ? }
? }
</script>
<style lang="css">
? .editor {
? ? width: 100%;
? ? margin: 0 auto;
? ? position: relative;
? ? z-index: 0;
? }
? .toolbar {
? ? border: 1px solid #ccc;
? }
? .text {
? ? border: 1px solid #ccc;
? ? min-height: 500px;
? }
</style>
效果：
2.上傳本地視頻至oss
因為wangEditor本身只能通過鏈接插入視頻肖抱，不能實現上傳本地視頻软棺，所以我總結多方網絡經驗猴誊，自己手扣了一個（就是通過ElementUI上傳組件實現阁将，拿到最終圖片路徑后再放進富文本,思路大概就是這樣膏秫。但是插入的視頻不能改變大小，如果有實現的小伙伴冀痕，就麻煩給我指點一下哈哈哈）
新建組件wangEndtorArticle.vue：（該組件功能比較完整荔睹，包括上面的上傳圖片）
<template>
? <div style="display: inline-flex;">
? ? <div class="img-list-item common mb_10" v-for="(item,index) in dialogImageUrl">
? ? ? <video width="150px" height="150px" style="padding: 0 5px;" controls="controls" :src="item"> 您的瀏覽器不支持視頻播放</video>
? ? ? <i class="del-img" @click="forkImage(index)"></i>
? ? </div>
? ? <el-upload action="https://wtwf-product.oss-cn-chengdu.aliyuncs.com"
? ? ? ? ? ? ? :data="dataObj" :show-file-list="false"
? ? ? ? ? ? ? :auto-upload="true"
? ? ? ? ? ? ? :on-remove="handleRemove"
? ? ? ? ? ? ? :on-success="handleUploadSuccess"
? ? ? ? ? ? ? :before-upload="beforeUpload"
? ? ? ? ? ? ? :limit="maxCount"
? ? ? ? ? ? ? accept=".mp4"
? ? ? ? ? ? ? :on-exceed="handleExceed"
? ? ? ? ? ? ? :on-progress="uploadVideoProcess">
? ? ? <span class="warp">
? ? ? ? <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;position: relative;top: -15px;">
? ? ? ? </el-progress>
? ? ? ? <i v-else class="el-icon-plus" :style="{fontSize: '18px',fontWeight:'bold',padding:paddings,position:'relative',top:'60px'}"></i>
? ? ? </span>
? ? </el-upload>
? </div>
</template>
<script>
? import {
? ? policy1
? } from '@/api/oss'
? export default {
? ? props: {
? ? ? value: Array,
? ? ? //最大上傳圖片數量
? ? ? maxCount: {
? ? ? ? type: Number,
? ? ? ? default: 5
? ? ? },
? ? ? w: {
? ? ? ? type: String,
? ? ? ? // default:'100px'
? ? ? },
? ? ? h: {
? ? ? ? type: String,
? ? ? ? // default:'100px'
? ? ? },
? ? ? paddings: {
? ? ? ? type: String,
? ? ? }
? ? },
? ? data: function() {
? ? ? return {
? ? ? ? videoFlag: false,
? ? ? ? videoUploadPercent: 0,
? ? ? ? videis: false,
? ? ? ? dataObj: {
? ? ? ? ? policy: '',
? ? ? ? ? signature: '',
? ? ? ? ? key: '',
? ? ? ? ? ossaccessKeyId: '',
? ? ? ? ? dir: '',
? ? ? ? ? host: ''
? ? ? ? },
? ? ? ? dialogVisible: false,
? ? ? ? dialogImageUrl: []
? ? ? }
? ? },
? ? computed: {
? ? ? fileList() {
? ? ? ? let fileList = [];
? ? ? ? for (let i = 0; i < this.value.length; i++) {
? ? ? ? ? fileList.push({
? ? ? ? ? ? url: this.value[i]
? ? ? ? ? });
? ? ? ? }
? ? ? ? console.log('視頻---->', fileList);
? ? ? ? console.log('視頻22222222222222---->', this.dialogImageUrl);
? ? ? ? return fileList;
? ? ? }
? ? },
? ? methods: {
? ? ? //刪除視頻
? ? ? forkImage(index) {
? ? ? ? // console.log('當前索引', index);
? ? ? ? this.dialogImageUrl.splice(index, 1);
? ? ? ? // console.log('刪除后的數組數組', this.dialogImageUrl);
? ? ? },
? ? ? getUUID() {
? ? ? ? return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
? ? ? ? ? return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
? ? ? ? })
? ? ? },
? ? ? emitInput(fileList) {
? ? ? ? let value = [];
? ? ? ? for (let i = 0; i < fileList.length; i++) {
? ? ? ? ? value.push(fileList[i].url);
? ? ? ? }
? ? ? ? this.$emit('input', value)
? ? ? },
? ? ? handleRemove(file, fileList) {
? ? ? ? this.emitInput(fileList)
? ? ? },
? ? ? handleUploadSuccess(res, file) {
? ? ? ? // console.log("成功后", file)
? ? ? ? // console.log('獲取圖片', res.data);
? ? ? ? let url = this.dataObj.host + '/' + this.dataObj.key.replace('${filename}', file.name);
? ? ? ? // console.log('路徑', url);
? ? ? ? this.fileList.push({
? ? ? ? ? name: file.name,
? ? ? ? ? url: url
? ? ? ? });
? ? ? ? this.dialogVisible = true;
? ? ? ? this.dialogImageUrl.push(url);
? ? ? ? // console.log("視頻地址", this.);
? ? ? ? this.emitInput(this.fileList);
? ? ? ? this.videoFlag = false;
? ? ? ? this.videoUploadPercent = 0;
? ? ? },
? ? ? uploadVideoProcess(event, file, fileList) {
? ? ? ? this.videoFlag = true;
? ? ? ? this.videoUploadPercent = Math.floor(event.percent);
? ? ? },
? ? ? beforeUpload(file) {
? ? ? ? var fileSize = file.size / 1024 / 1024 < 100;
? ? ? ? console.log('視頻大小', fileSize);
? ? ? ? if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) ==
? ? ? ? ? -1) {
? ? ? ? ? this.$message({
? ? ? ? ? ? type: 'warning',
? ? ? ? ? ? message: '請上傳正確的視頻格式'
? ? ? ? ? });
? ? ? ? ? return false;
? ? ? ? }
? ? ? ? if (!fileSize) {
? ? ? ? ? this.$message({
? ? ? ? ? ? type: 'warning',
? ? ? ? ? ? message: '視頻大小不能超過100MB'
? ? ? ? ? });
? ? ? ? ? return false;
? ? ? ? }
? ? ? ? this.videoFlag = true;
? ? ? ? console.log("上傳視頻值", file);
? ? ? ? const _self = this
? ? ? ? return new Promise((resolve, reject) => {
? ? ? ? ? policy1().then(response => {
? ? ? ? ? ? console.log("視頻---->獲取數據", response.data);
? ? ? ? ? ? _self.dataObj.policy = response.data.policy;
? ? ? ? ? ? // console.log('policy值',response.data.policy);
? ? ? ? ? ? _self.dataObj.signature = response.data.signature;
? ? ? ? ? ? // console.log('signature值',response.data.signature);
? ? ? ? ? ? _self.dataObj.ossaccessKeyId = response.data.accessKeyId;
? ? ? ? ? ? // console.log('ossaccessKeyId值',response.data.accessKeyId);
? ? ? ? ? ? _self.dataObj.key = response.data.dir + this.getUUID() + '_${filename}';
? ? ? ? ? ? console.log('視頻---->key值', response.data.dir + this.getUUID() + '_${filename}');
? ? ? ? ? ? _self.dataObj.dir = response.data.dir;
? ? ? ? ? ? console.log('視頻---->dir值', response.data.dir);
? ? ? ? ? ? _self.dataObj.host = response.data.host;
? ? ? ? ? ? _self.dataObj.callback = response.data.callback;
? ? ? ? ? ? resolve(true)
? ? ? ? ? }).catch(err => {
? ? ? ? ? ? console.log(err)
? ? ? ? ? ? reject(false)
? ? ? ? ? })
? ? ? ? })
? ? ? },
? ? ? handlePreview(file) {
? ? ? ? // console.log('獲取視頻', file.url);
? ? ? ? this.dialogVisible = true;
? ? ? ? this.dialogImageUrl = file.url;
? ? ? },
? ? ? handleExceed(files, fileList) {
? ? ? ? // console.log("獲取上傳視頻", files, fileList);
? ? ? ? this.$message({
? ? ? ? ? message: '最多只能上傳' + this.maxCount + '個視頻',
? ? ? ? ? type: 'warning',
? ? ? ? ? duration: 1000
? ? ? ? });
? ? ? },
? ? }
? }
</script>
<style lang="scss" scoped>
? .warp {
? ? display: inline-block;
? ? // padding: 54px 64px;
? ? width: 150px;
? ? height: 151px;
? ? border: 1px dashed #DEE5ED;
? }
? /deep/.el-upload-list {
? ? display: none;
? }
? .el-upload-video {
? ? width: 149px;
? ? height: 149px;
? ? border: 1px dashed #d9d9d9;
? ? border-radius: 6px;
? ? cursor: pointer;
? ? position: relative;
? ? overflow: hidden;
? }
? .el-upload-video-i {
? ? font-size: 20px;
? ? font-weight: bold;
? ? padding-top: 43px;
? ? color: #8c939d;
? ? width: 50px;
? ? height: 50px;
? ? line-height: 50px;
? ? text-align: center;
? }
? //視頻
? .img-list-item {
? ? position: relative;
? ? margin: auto;
? }
? // .img-list-item img {
? //? box-sizing: border-box;
? //? vertical-align: middle;
? //? border: 0;
? // }
? .img-list-item i.del-img {
? ? width: 20px;
? ? height: 20px;
? ? display: inline-block;
? ? background: rgba(0, 0, 0, .6);
? ? background-image: url(../assets/images/close.png);
? ? background-size: 18px;
? ? background-repeat: no-repeat;
? ? background-position: 50%;
? ? position: absolute;
? ? top: 0;
? ? right: -1px;
? }
</style>
3.頁面調用
<editor-bar v-model="detail" :isClear="isClear" ></editor-bar>
import EditorBar from '../../../components/wangEndtorArticle.vue'? ?//引入組件
export default {
? ? components: {
? ? ? EditorBar? ?//注冊組件
? ? },
? ? data() {
? ? ? return {
? ? ? ? ? ? ? ?detail:"? ?"? //存放富文本內容
? ? ? ? ? ? ? ?}
}
}
效果：
查看了很多資料，有些忘記保存? ? ? ? ? ? ? ? ? ? ? 請看過的小伙伴們留個贊喲（前端小白請各位大佬多多指教）Ｑ陨摺Ｆ！腊尚！
