vue 中quill-editor富文本图片和视频上传功能

news2025/1/30 16:43:19

quill-editor富文本对于新手来说是个很友好的富文本编辑器。但是里面的图片上传和视频上传功能在实际的工作中不能满足要求。

1.原生的图片上传会转换成bas64格式,

2.视频上传只是个输入框,要有视频链接了才能添加视频;而且视频标签是iframe标签,并不是video标签。

现在主要解决以上这两个问题

 加了个自定义上传视频弹出框,既可以用已经有的在线视频地址,也可以上传本地视频

富文本组件

要动的地方就是要设置个全局上传文件接口的变量 uploadFileURL。

以及uploadvideoSuccess和uploadSuccess方法里图片返回的格式,我是code==200就直接拿data的文件地址。要是你们上传图片接口格式不一样要换一下拿参数的方法。

 wueditor.vue

<template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/433585.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

大数据分析案例-基于XGBoost算法构造房屋租赁价格评估模型

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

asp.net+sqlserver基于web的在校大学生贷款管理系统

采用的技术&#xff1a; 1.ASP.NET框架&#xff1b; 2. SQL Server 数据库&#xff1b; 3.AJAX技术&#xff1a;它不是一种新的编程语言&#xff0c;而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术&#xff1b; 4.HTML,CSSDIV,代码实现静态页面&#xff1b; 开…

HTML5 <output> 标签、HTML5 <optgroup> 标签

HTML5 <output> 标签 实例 HTML5 <output>标签用来定义不同类型的输出。请参考下述示例&#xff1a; 将计算结果显示在 <output> 元素中&#xff1a; <form oninput"x.valueparseInt(a.value)parseInt(b.value)">0<input type"ran…

达索系统基于系统工程的AUTOSAR设计端到端解决方案 | 达索系统百世慧®

目录 达索系统基于系统工程的AUTOSAR设计端到端解决方案 达索系统&#xff1a;陪伴AUTOSAR一起成长 达索系统的解决方案&#xff1a;MBSE和AUTOSAR结合 软件设计端到端的追溯能力 系统架构设计中的“条理分明” 全贯通的一站式平台 科技是第一生产力&#xff0c;达索系统…

项目设计:迷宫游戏设计day2

今天主要把搜出最短路径想出来了&#xff0c;但还是没有优化&#xff0c;其思想就是&#xff0c;再搜的时候&#xff0c;记录它的前驱结点&#xff0c;这样就能在最后的时候就可以把它的最短路径以反序遍历的方式&#xff0c;将他输出出来 明天再优化优化

JVM系统优化实践(17):线上GC案例(二)

您好&#xff0c;我是湘王&#xff0c;这是我的CSDN博客&#xff0c;欢迎您来&#xff0c;欢迎您再来&#xff5e; GC的概念并不难明白&#xff0c;而且它的原理也不复杂&#xff0c;但是很难用好。为什么&#xff1f;因为每个平台、架构、指标、运行环境都不一样&#xff0c;甚…

设计模式-行为型模式之中介者模式

2. 中介者模式 2.1. 模式动机 在用户与用户直接聊天的设计方案中&#xff0c;用户对象之间存在很强的 关联性&#xff0c;将导致系统出现如下问题&#xff1a; 系统结构复杂 对象之间存在大量的相互关联和调用&#xff0c;若有一个对象发生变化&#xff0c;则需要跟踪和该对象关…

初识 MongoDB

文章目录 一、简介二、体系结构三、数据类型四、特点五、应用场景 提示&#xff1a;以下是本篇文章正文内容&#xff0c;MongoDB 系列学习将会持续更新 一、简介 MongoDB 是一个文档数据库&#xff0c;是由字段和值对&#xff08;field:value&#xff09;组成的数据结构&…

煤矿电子封条视频监控系统 yolov7

煤矿电子封条视频监控系统基于yolov7python网络模型视频AI智能分析技术&#xff0c;煤矿电子封条视频监控算法模型对现场皮带撕裂、跑偏、皮带异物、堆煤等设备异常状态实时监控分析自动识别预警。YOLOv7 的发展方向与当前主流的实时目标检测器不同&#xff0c;研究团队希望它能…

(原创)Flutter基础入门:装饰器Decoration

前言 作为一个Android开发&#xff0c;最近打算把自己学的Flutter相关知识做个积累&#xff0c;所以这会是一个系列的博客。里面讲的都会是一些Flutter相关的知识&#xff0c;有基础的&#xff0c;也有比较深入的&#xff0c;由浅入深嘛。 那么今天作为开篇&#xff0c;就先讲…

经典回顾丨同为科技(TOWE)在2008年奥运场馆防雷建设中都做了什么?

针对大型体育赛事场馆防雷建设工作非常重要&#xff0c;这是因为大型体育赛事通常吸引了大量的观众和运动员聚集&#xff0c;一旦场馆遭受雷击&#xff0c;可能会造成严重的伤亡和财产损失。如今&#xff0c;大型体育赛事的场馆都会配备防雷设施&#xff0c;如建筑物避雷针、接…

代理设计模式解读

目录 代理模式的基本介绍 静态代理 静态代码模式的基本介绍 应用实例 思路分析图解(类图) 代码实战 静态代理优缺点 动态代理 动态代理模式的基本介绍 JDK 中生成代理对象的 API 代码实战 Cglib 代理 Cglib 代理模式的基本介绍 Cglib 代理模式实现步骤 Cglib 代理模…

同为科技(TOWE)机柜PDU电源插头类型详解

机柜PDU电源插座作为机房服务器众多设备运行的“最后一米”也是最为密切的电源配件&#xff0c;专用于精细保护单相交流供电的敏感设备&#xff0c;其品质好坏直接影响到各个设备的正常运行。机柜PDU电源管理器是由插头、线缆、主体三个部分组成&#xff0c;其中电源插头可以分…

leetcode24. 两两交换链表中的节点

给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4] 输出&#xff1a;[2,1…

什么是机器学习?

目录 简介 机器学习可以做什么 机器学习未来的趋势 总结 简介 机器学习是一种人工智能领域中的技术&#xff0c;其主要目的是让计算机能够自动进行模式识别、数据分析和预测。 机器学习的起源可以追溯到20世纪50年代&#xff0c;当时美国的Arthur Samuel在一篇论文中提出了相关…

(转)使用Midjourney进行图生图

原文链接:使用Midjourney进行AI绘画的基础手册-虎课网 接下来,我们讲一下,如果使用Midjourney的垫图功能,创作相同风格的图片 第一步: 1、打开discord,查看自己的服务器 2、我们双击“+”,来上传图片,图片上传后,按下enter发送图片; 图片发送成功后,点击图片放大…

不得不说的创建型模式-单例模式

单例模式是创建型模式的一种&#xff0c;它的作用是确保一个类只有一个实例&#xff0c;并提供全局访问点。单例模式通常用于管理共享资源&#xff0c;如配置文件、数据库连接池等&#xff0c;它可以保证这些资源只被创建一次&#xff0c;并且可以被全局共享。 下面是一个使用C…

AI 智能会有自主意识吗?会不会伤害人?

随着科技的高速发展&#xff0c;人工智能已逐渐融入我们的日常生活。从智能家居设备到自动驾驶汽车&#xff0c;人工智能的应用领域越来越广泛。然而&#xff0c;在这个趋势背后&#xff0c;我们面临着一个极具争议的问题&#xff1a;人工智能是否会觉醒自我意识&#xff1f;我…

程序员阿里三面无理由挂了,被HR一句话噎死,网友:这可是阿里啊

进入互联网大厂一般都是“过五关斩六将”&#xff0c;难度堪比西天取经&#xff0c;但当你真正面对这些大厂的面试时&#xff0c;有时候又会被其中的神操作弄的很是蒙圈。 近日&#xff0c;某位程序员发帖称&#xff0c;自己去阿里面试&#xff0c;三面都过了&#xff0c;却被…

近期遇到的vscode 插件开发的问题,when表达式,正则匹配路径

前言 最近在修改dbt插件的时候&#xff0c;遇到了几个比较奇怪的问题&#xff0c;猜测应该是因为跟新了VSCode导致的。 这里稍微记录一下&#xff0c;如果能帮助其他的同学&#xff0c;那就太值啦。 when 正则表达式 之前有在packgae.json 中使用 when 的正则表达式&#xf…