首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

vue + quill富文本编辑器 实现自定义图片上传功能

前言 好久没更新博客了,主要最近一直忙,一是工作比较多,二是忙着写自己的‘墨客’项目。...该项目前后端分离,后端使用laravel5.5 + passport提供接口,前端使用vue2.5 + axios + vuex。...但是quill在上传片时使用的是base64编码后的图片,这与我们的需求不符,于是决定自己定制化一下,ok,接下来开始正文。 代码实现 网上好多方法,但是没一个能用的,有的就算能用也根本不规范。...首先需要定制化导航栏,其次要定制化图片上传功能: <header-bar :title="title" :pre-page="prePage...之后的逻辑是首先:调用imageHandler方法,进行初始化与文件验证;接着调用saveImage,请求接口,<em>我</em>的接口返回完整的图片链接;最后是<em>使用</em>quill的api进行插入。 OJBK!

80620

Laravel框架实现的上传图片到七牛功能详解

本文实例讲述了Laravel框架实现的上传图片到七牛功能。...qiniu-laravel-storage 然后 config/app.php 中注册服务提供者: zgldh\QiniuStorage\QiniuFilesystemServiceProvider:...七牛账号注册及配置 先去七牛注册一个账号,点击官网的注册会让我们选择用户类型,这里就选择个人用户。 接下来按照流程来进项注册就OK了,就不演示给大家看了。...由于我的手机号已经注册了,这里只能给大家看一下已经添加了存储对象的实例了。 OK ,简单的用给大家看一下七牛的默认域名及自定义域名在哪里看。...下面给大家看一下七牛的秘钥的位置: 点击秘钥管理,就可与看到个人七牛的秘钥了: 七牛Laravel中的配置 上面已经介绍相关的配置在哪儿,现在我们要将这些配置Laravel使用上传图片到七牛

2K41
您找到你想要的搜索结果了吗?
是的
没有找到

Typora+PicGo+七牛云搭建

PicGo也是直接上github上下载最新版本即可,有关PicGo的一些安装配置,可以访问我以前写过的博文: github搭建使用阿里云对象存储OSS+PicGo搭建使用七牛云和PicGo...默认的端口本来是 36677,不知道是不是因为版本更新了端口号才改变的,试下了下用这个默认的36679typora上传图片失败了,把端口号改为 336677 就好了。 ? ?...打开上面图片的链接,发现上传成功了 http://xdr630.top/typora-icon.png 设置完成后,就可以直接在编辑器里使用了, Typora 里插入图片时,就可以自动上传图片到指定的床了...这里是把七牛云作为床了,也可以根据自己的选择其他云平台作为床 插入图片时有个上传图片的选择,选择即可上传床,打开图片的链接发现图片的路径的位置信息不在本地了,而是上传床那里了。...有关配置床的本地配置情况,这里就不在多说了,可以阅读以前写过这方面的介绍: https://blog.csdn.net/qq_41684621/category_9598551.html

1.1K30

加速你的框架运行, 教你如何减少服务提供者的启动.

中出现admin才启动这个服务 比如intervention/image实际上是一个图片处理包,我们也不需要每一次请求都启动它,只需要压缩,操作图片时才启动这个包,这时候就可以写一个Service类,类的构造方式启动这个服务...首先我们想要排除某个服务提供者,把它加入项目根目录下composer.json文件中的extra.laravel.dont-discover的数组中即可 服务提供者 如果我们不启动这些服务,但又使用的话...,这时候就会出现不可意料的结果 所以,这时候我们就需要按需启动服务提供者.比如只有url包含有admin才启动encore/laravel-admin 首先我们先查看这个包的根目录下的composer.json...文件 服务提供者 这里它注册了服务提供者和门面,所以我们只需要手动注册这两个即可 这里选择\App\Providers\AppServiceProvider::boot引导这些服务 如果服务出现依赖情况的话...因为这里没有看到有依赖的痕迹,所以直接一次性注册启动服务 可以手动调用XXXServiceProvider::register然后再调用XXXServiceProvider::boot方法.

9710

推荐几款免费的床和图片处理工具

之前的 Hexo 博客一直使用的是腾讯云对象存储,优点是访问速度快、有方便的客户端工具使用,缺点是走公网 https 访问图片时,下行流量是要收费的(这也算不上缺点吧,收费是应该的),访问速度快到我使用的背景图片都是用的原生...免费床 这里主要推荐两个比较热门的第三方床,一个是 sm.ms,还有一个是路过床。当然,不能因为是免费的就上传一些不可描述的资源上去?...,这些床在上传片时都有自动鉴别的功能,一旦违反规定就会被封账号和 IP。...图片压缩工具 解决了上面的床存放和客户端问题,这差不多已经达到了说的理想情况了吧(免费、访问速度快、上传操作方便),但是还是有一些细节需要进一步优化,比如我上面说到之前使用腾讯云的时候动辄用 4k...倒是很心疼之前用 4k 图片时溜走的那么多流量?...

8.4K40

【腾讯云的1001种玩法】 Laravel 整合万向优图片管理能力,打造高效图片处理服务

如何在 Laravel使用万象优?...安装 执行 composer 命令安装拓展 composer require yuecode/image:dev-master config/app.php中的 Provider 中添加 \Yuecode...配置完成后,需要使用的文件中使用 use Yuecode\Image\YouTu; 然后使用静态方法调用 比如 $res = YouTu::pornDetectUrl( array...,万象优V2接口 statImage 查询图片信息,万象优V2接口 copyImage 复制图片,万象优V2接口 delImage 删除图片,万象优V2接口 uploadImageV1 上传图片...整合微视频上传管理能力,轻松打造视频App后台 多维活体检测,让人脸识别更安全 【腾讯云的1001种玩法】Laravel 整合 COS 对象存储服务,享受无限容量存储服务

4.7K00

Laravel5.8+LayUI踩坑之路

今天整理博客笔记时发现,自己对于现在所学的Laravel5.8与LayUI前端框架学习的笔记已经多达近20篇,其中包括了对Laravel5.8的理解、配置环境、部署Laravel5.8框架、Laravel5.8...学习笔记、使用LayUI兼容性踩坑笔记、相关技能学习及项目笔记等文章,特此在此处建立一个里程碑,来记录自己学习Laravel5.8与LayUI艰难合并之路,哈哈,看看我的文章吧。...思维导 ---- image.png ---- 环境搭建 Ubuntu16.04部署LNMP环境 【Ubuntu16.04】使用composer安装laravel框架 【Composer】安装Laravel5.8...应用 基础笔记 Laravel踩坑日记之基本配置及Demo Laravel踩坑日记之配置文件 Laravel踩坑日记之PHP工具匠使用 Laravel踩坑日记之路由配置 Laravel踩坑日记之请求 Laravel...踩坑日记之文件上传 Laravel5.8学习之数据库操作构造器 踩坑笔记 Laravel5.8使用LayUI上传并显示图片操作 Laravel5.8使用LayUI实现批量删除 Laravel5.8使用LayUI

1.6K20

laravel实现上传图片,并且制作缩略图,按照日期存放的代码

先上代码吧: 前端代码: 有很多小伙伴在做表单上传文件的时候没有注意表单的上传格式是什么,就可能导致上传文件、图片不成功!...-3 col-xs-12" for="main_img" 展示主 <span class="required" *</span </label <div class="col-md-6 col-sm...给表单加入token; 后端处理: 首先<em>我</em><em>使用</em>的是Intervention Image类库来制作图片的缩略图、以及保存图片到指定位置; 关于Intervention Image类库<em>我</em>就不多做介绍,如有不了解的请度娘帮助...; } } 后端处理主要思想:首先通过Validator类库来检验当前<em>上传</em>上来的文件是否符合要求,如果符合要求,就可以对图片进行处理了;处理的时候<em>我</em>是先把要保存图片的相对地址给拼接好,然后通过<em>laravel</em>...以上这篇<em>laravel</em>实现<em>上传</em>图片,并且制作缩略图,按照日期存放的代码就是小编分享给大家的全部内容了,希望能给大家一个参考。

86831

PicGo + Gitee 构建免费云图床

这里安装 gitee 插件: PicGo 支持很多云图床,默认就包括七牛云、GitHub 等等。国内使用不推荐 GitHub,因为访问慢,所以使用了其替代品 Gitee。...登录 Gitee,然后新建一个仓库,记得勾选「使用Readme文件初始化这个仓库」: 个人设置中生成一个私人令牌,把值记录下来: 打开床设置,填入上面获取的信息,设置为默认床并保存: 这里 path...然后我们就可以在上传区域上传图片了: 上传成功后我们可以相册中看到,进行编辑、拷贝链接和删除。 点击第一个图标,我们就可以拷贝为 Markdown 链接,CTRL+V 即可粘贴使用了。 !...如果你还使用 typora,那么可以设置的图像里选择 PicGo 自动进行上传: 如果你选择了插入图片时上传图片,那么图片在插入时就会进行上传。...然后 typora 菜单栏图像中选择当插入图片时上传图片。 这样 typora 会自动插入 YAML 元信息: 当然,你也可以手动进行这样的设置。

62620

Windows 如何安装Homestead

省去了你大部分软件需要安装 安装 Homestead Vagrant Box 命令行下输入以下命令,注意,国内使用 以下命令 80%会出现问题,你也可以使用第三方进行下载,但是觉得最后还是会遇到问题...vagrant box add laravel/homestead 下载 Homestead 管理脚本 cd C:\Users\你的用户名 //注意最好不要使用中文 git clone https...就安装成功了,接下来进行配置 配置 Homestead.yaml 文件 配置之前,我们先在任意磁盘 新建一个文件夹 Code,用来存放我们的 PHP代码,比如 laravel等 cd D:\php.../laravel-blog/public 注意使用 .test 作为域名后缀 ,当然也可以使用别的 比如.work什么的 ,随你爱好,但是,不要使用 .dev .app 这两个了 ,因为被收买了,而且...create-project --prefer-dist laravel/laravel laravel-blog 修改 hosts 文件 192.168.10.10 laravel-blog.test

2.3K20

基于 Hexo 从零开始搭建个人博客系列

主题特点 简单漂亮,文章内容美观易读 Material Design 设计 响应式设计,博客桌面端、平板、手机等设备上均能很好的展现 瀑布流式的博客文章列表(文章无特色图片时会有 24 张漂亮的图片代替...) 时间轴式的归档页 丰富的关于我页面(包括关于我、文章统计的项目、的技能、相册等) 可自定义的数据的友情链接页面 支持文章置顶和文章打赏 支持 MathJax 可设置复制文章内容时追加版权信息...Gitalk、Gitment、Valine 和 Disqus 评论模块 集成了不蒜子统计、谷歌分析(Google Analytics)和文章字数统计等功能 支持首页的音乐播放和视频播放功能 的主题效果...(部分页面) 首页效果 首页文章列表 文章详情页 归档 关于自己 留言板 友情链接 追番页 书单页 相册页 评论 音乐 即时聊天 可以PC和手机上接收消息(这里放手机效果...图片 遇到问题 如果在搭建博客中遇到什么问题 ,请在 评论区 留言 ,我会在第一时间内帮助您解决问题 。

14710

如何制作PharPHP(归档文件)及与composer的比较

实战 Laravel 中,你可以使用 box 工具来封装你的应用程序为 Phar(PHP 归档文件)。 以下是封装 Laravel 应用程序为 Phar 的步骤: 1....例如,你可以使用以下命令创建一个基本的 box.json 文件: box init 这将创建一个包含默认配置的 box.json 文件,文件中你可以进一步自定义配置。 2....运行以下命令来生成 Phar 文件: box build 这将根据你 box.json 文件中配置的参数,将你的 Laravel 应用程序打包为 Phar 文件。 4....cp league-csv.phar /var/www/html/mars.cn/app/Phar/ 有个大胆的想法 小伙伴平常有没有遇到以下这种情况:遇到技术难题时,网上教程一堆堆,优秀的很多,但也有很多是过时的...公众号的技术文章,都是亲自校验过的。至少可以保证发文的一段时间,不会过时。如果你实操过程中,有遇到问题,可以同名公众号留言,免费解答,相互学习,相互成长^v^

24710

如何提高核心竞争力

的核心优势是什么? 可以做哪些超链接? 要怎样积累资源? 今天的又为了梦想,嗷嗷学Java,? ? ? ---- "核心竞争力" 哪个字更重要? 答案是 竞 !...eg,写文章,可以用碎片时代思考思路。吴军,碎片时间可以写五六篇文章。 ? 3秒禅,做任何事前先停3秒。 ? [知识技能:] 碎片时代如何学习一个领域?你第一时间会干什么?...1,找人,越新的领域,越懂它的是人 2,一上来就买本书 3,上网搜关键词 4,找相似领域,找到别人的复盘 最好是先找人问,然后去 豆瓣,知乎 找相关书的评价,看书评 脑,挑1 2 本书看,同时加入社群...eg,作汶川地震志愿者时,遇见了现在的合伙人,遇见了媳妇。 看到竞争力的全貌,不要在一个维度使蛮劲,要学会用 3D 的角度。 成长时间的分配: 70%实践,20%互动,10%学习。...pspsps problem:遇到问题,先不要系统学习知识 skill:先直接学一个小技能 problem:继续遇到问题 skill:学一个小技能 problem:继续遇到问题,无法用skill

76570

又一篇 Deployer 的使用攻略

画了一张来说明它的操作原理: 简单介绍一下,Deployer 安装在本地,它通过 SSH 协议登录到服务器 web server 上执行一系列我们预定的操作,其中包含从代码库 Git Server...一共分为以下几个部分: 本地使用 composer 安装 deployer Linux 服务器添加账户与配置权限 项目 git 仓库允许服务器访问(clone 代码) 部署我们的 web 项目 我们分开一个个讲...shared - 共享文件夹,它的作用就是存储我们项目中版本间共享的文件,比如 Laravel 项目的 .env 文件, storage 目录,或者你项目的上传文件夹,它会以软链接的形式链接到当前版本中...个人用它已经两年了,非常喜欢这样简单的部署方式,但是新手刚用的时候难免服务器权限这块碰壁不少,总结了以下几个建议: 尽量使用系统提供的包管理工具来安装软件,比如 nginx, php 等,毕竟它是人家通过...N 年的实践总结出来的合理使用方式,包括配置文件的写法等都是科学的方式,另外一点就是当我们遇到问题的时候搜索到的结果也比较通用,当然你已经是系统高手了,那就不要看这条了。

1.4K60

开源分享 | 在线图片编辑器,支持PSD解析、AI抠等,基于Puppeteer生成图片

上传 PSD 模板 点击 “的” - “资源管理”,上传PSD模板按钮,进入PSD解析上传界面界面。选择或拖入 PSD 文件,等待解析完成后开始编辑,调整好模板后点击右上角“上传模板”,等待完成。...图片 上传完成后点击查看作品即可打开模板,之后的作品” 中可以找到该模板。...由于服务器国内,生成下载图片可能会裂,这不是BUG。 AI 抠 上传需要去除背景的图片,自动抠除背景。...服务端,我们使用 puppeteer 启动无头浏览器, Chrome 中打开绘制页,并往其 BOM 中注入广播通知方法,方法内调用截图,项目的核心就是完成这样的操作闭环。...与大多数程序员一样,开始写前端也是从一段段“胶水”代码开始的,遇到问题的第一反应就是打开浏览器搜索,然后从各种问答与笔记中抽丝剥茧式地尝试解决问题。

57630

Laravel API 开发推荐阅读清单

API 文档神器 Swagger 介绍及 PHP 项目中使用 - API 文档撰写方案 推荐 Laravel API 项目必须使用的 8 个扩展包 使用 Jwt-Auth 实现 API 用户认证以及无痛刷新访问令牌...讲讲最近用 Laravel 做的一个 App 后端项目 Laravel Passport API 认证使用小结 关于 RESTful API 设计的总结 Laravel 5.5 使用 Passport...) 多字段登录通用解决方案 Laravel 做 API 服务端,VueJS+iView 做 SPA,给新手一个 Demo Laravel使用 GraphQL 一【获取数据】 Laravel 开发...RESTful API 的一些心得 对 REST 的理解 用 Laravel 搭建带 OAuth2 验证的 RESTful 服务 Laravel 中动态隐藏 API 字段 Nginx 下部署...—— 微信登录、JWT的使用; 用户信息 —— 获取个人信息、上传图片接口、修改个人信息; 话题接口 —— 发布、修改、删除、列表; 话题回复接口 —— 发布、修改、删除、列表; 权限控制 —— 权限列表

4.2K70
领券