百度编辑器 ueditor 上传图片视频到阿里 Oss 或其他云 PHP

可用大佬的:https://github.com/codingyu/laravel-uedito...
如果想了解工作原理,可以继续阅读

导读

一台普通的服务器大概40g的容量,避免以后迁移服务器,上传图片或视频首先想到的是上云,不上云说出去都不好意思

吐槽

在网上看到很多文章,是在编辑器里面,include 阿里云oss 的sdk ,嵌入进去,然后我看了一下发布的时间为2012 年,看了晕晕的。

思路

其实思路清晰就不需要费很多时间就能搞定
在这里插入图片描述
只需要改这边的配置,把资源会发送到你熟悉的上传方式。

上传原理

我发现,整个上传过程百度编辑器干了两件事情

第一

打开编辑器的时候,会请求一下服务器,得到基本信息,比如表单文件的name 定义为什么, 这边定义的名为:upfile,如果上传成功的标识是什么:SUCCESS。
在这里插入图片描述

第二

上传文件的时候同样的连接,上传文件,只不过上面的是get请求,这个为post 请求。
在这里插入图片描述

php

我这边是用的laravel ,其他框架,或者没有框架的也一样,原理就是获取 $_FILE 中的数据

首先我们创建一个第一点说的,返回编辑器所需要的参数,不然会出现 后端服务未配置。

第一个要get的方法

    public function get_upload_baidu(Request $request){
        echo '{"imageActionName":"uploadimage","imageFieldName":"upfile","imageMaxSize":2048000,"imageAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"imageCompressEnable":true,"imageCompressBorder":1600,"imageInsertAlign":"none","imageUrlPrefix":"","imagePathFormat":"\/ueditor\/php\/upload\/image\/{yyyy}{mm}{dd}\/{time}{rand:6}","scrawlActionName":"uploadscrawl","scrawlFieldName":"upfile","scrawlPathFormat":"\/ueditor\/php\/upload\/image\/{yyyy}{mm}{dd}\/{time}{rand:6}","scrawlMaxSize":2048000,"scrawlUrlPrefix":"","scrawlInsertAlign":"none","snapscreenActionName":"uploadimage","snapscreenPathFormat":"\/ueditor\/php\/upload\/image\/{yyyy}{mm}{dd}\/{time}{rand:6}","snapscreenUrlPrefix":"","snapscreenInsertAlign":"none","catcherLocalDomain":["127.0.0.1","localhost","img.baidu.com"],"catcherActionName":"catchimage","catcherFieldName":"source","catcherPathFormat":"\/ueditor\/php\/upload\/image\/{yyyy}{mm}{dd}\/{time}{rand:6}","catcherUrlPrefix":"","catcherMaxSize":2048000,"catcherAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"videoActionName":"uploadvideo","videoFieldName":"upfile","videoPathFormat":"\/ueditor\/php\/upload\/video\/{yyyy}{mm}{dd}\/{time}{rand:6}","videoUrlPrefix":"","videoMaxSize":102400000,"videoAllowFiles":[".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid"],"fileActionName":"uploadfile","fileFieldName":"upfile","filePathFormat":"\/ueditor\/php\/upload\/file\/{yyyy}{mm}{dd}\/{time}{rand:6}","fileUrlPrefix":"","fileMaxSize":51200000,"fileAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp",".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid",".rar",".zip",".tar",".gz",".7z",".bz2",".cab",".iso",".doc",".docx",".xls",".xlsx",".ppt",".pptx",".pdf",".txt",".md",".xml"],"imageManagerActionName":"listimage","imageManagerListPath":"\/ueditor\/php\/upload\/image\/","imageManagerListSize":20,"imageManagerUrlPrefix":"","imageManagerInsertAlign":"none","imageManagerAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"fileManagerActionName":"listfile","fileManagerListPath":"\/ueditor\/php\/upload\/file\/","fileManagerUrlPrefix":"","fileManagerListSize":20,"fileManagerAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp",".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid",".rar",".zip",".tar",".gz",".7z",".bz2",".cab",".iso",".doc",".docx",".xls",".xlsx",".ppt",".pptx",".pdf",".txt",".md",".xml"]}';
    }

这个信息,其实在:

在这里插入图片描述

现在的时间是2019年12月21日 21:57:10,你可以复制上面的参数,或者自己去取。

然后就是上传方法POST

关于,laravel 如何上传文件到oss 请到这边 https://blog.csdn.net/qq_22823581/article/...

    public function upload_baidu(Request $request){
        $file =$request->file('upfile');
        return [
            'url'=> CommonService::upload()->upload($file),//你自己封装上传的方法
            "state" =>"SUCCESS",
            "title" => time(),
            "original" => time(),
            "type" => $file->getClientOriginalName(),
            "size" => time(),
        ];
    }

配置一下路由:

Route::post('/upload_baidu', 'common\FileController@upload_baidu');
Route::get('/upload_baidu', 'common\FileController@get_upload_baidu');

返回的参数为编辑器所需要的。好像说完了,思路对很重要。如果对上传文件到oss 和 不懂怎么上传文件到服务器的同学,要先去了解

===========================================

喜欢我的文章欢迎关注

或者有什么不懂的欢迎和我做朋友?:

https://www.cnblogs.com/liaosp/p/11075260....

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 1

公司做了一个产品,api一个框架,后台分为html项目【纯html+css+js】,后台用的TP,APP提交的数据【文字、图片,音频】后台要可访问与编辑,后台添加的数据文字、图片,音频、视频】要APP能访问,本来是想用OSS这样的产品,但是跟负责人那边要OSS,那边说先不用,先放本地,想了想,文件放到某一个项目【接口、或者后台】都不合适,如果以后项目如果做了负载均衡和多节点,这些资源如何访问是挺麻烦的一件事,干脆新建一个项目来存储这些资源,做个跨域上传【仅仅限制以上三个项目可跨域上传】,【api、后台接口、后台页面】都可以调用接口上传到本地专柜资源项目内,资源通过拼接这个站点的url访问,以后只需要少量配置就可以实现资源在各项目的应用。后台用的富文本编辑器是ueditor,把它的上传类改的面目全非,去上传到我的资源项目【我也不想这么麻烦 :speak_no_evil:】

4年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
未填写
文章
37
粉丝
16
喜欢
132
收藏
113
排名:327
访问:2.9 万
私信
所有博文
社区赞助商