百度編輯器 ueditor 上傳圖片影片到阿里 Oss 或其他雲 PHP

liaosp發表於2019-12-21
阿里PHP

可用大佬的：https://github.com/codingyu/laravel-uedito...
如果想了解工作原理，可以繼續閱讀

一臺普通的伺服器大概40g的容量，避免以後遷移伺服器，上傳圖片或影片首先想到的是上雲，不上雲說出去都不好意思

在網上看到很多文章，是在編輯器裡面，include 阿里雲oss 的sdk ，嵌入進去，然後我看了一下發布的時間為2012 年，看了暈暈的。

其實思路清晰就不需要費很多時間就能搞定
在這裡插入圖片描述
只需要改這邊的配置，把資源會傳送到你熟悉的上傳方式。

我發現，整個上傳過程百度編輯器幹了兩件事情

第一

開啟編輯器的時候，會請求一下伺服器，得到基本資訊，比如表單檔案的name 定義為什麼， 這邊定義的名為：upfile，如果上傳成功的標識是什麼：SUCCESS。
在這裡插入圖片描述

第二

上傳檔案的時候同樣的連線，上傳檔案，只不過上面的是get請求，這個為post 請求。
在這裡插入圖片描述

我這邊是用的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 協議》，轉載必須註明作者和本文連結

相關文章