PbootCMS如何修改上傳格式和支持webp圖片

廢話不多說，PbootCMS碰到需要修改文件上傳格式的時候，首先去/config/config.php里修改upload配置信息，一般情況下，這里修改后就ok了。

這邊以一個圖片格式為例來介紹，本文栗子上場→webp格式圖片。

什么是WebP格式的圖片？

WebP是Google在2010年發布的一種新型圖片格式，支持無損和有損壓縮。在無損壓縮方面，同質量的WebP圖片比PNG的體積小26%，而在有損壓縮方面，同質量的WebP圖片比JPEG小25-34%。WebP在不降低圖片質量的同時，減少了約三分之一的體積。詳細可參考谷歌官方。

修改步驟

1、打開/config/config.php修改upload配置信息，增加webp格式

//?上傳配置
'upload'?=>?array(
????'format'?=>?'jpg,jpeg,png,gif,xls,xlsx,doc,docx,ppt,pptx,rar,zip,pdf,txt,mp4,avi,flv,rmvb,mp3,otf,ttf,webp',
????'max_width'?=>?'1920',
????'max_height'?=>?''
),

一般到此就結束的，然而測試發現提示：“選擇的圖片種包含不支持的格式”，這里是因為layui本身也有圖片格式限制導致。

2、打開ppsdminiewdefaultlayuilayui.all.js，搜索jpg|png|gif|bmp|jpeg，在尾巴增加webp，保存。

原來

jpg|png|gif|bmp|jpeg

修改成

jpg|png|gif|bmp|jpeg|webp

3、操作完前面后臺強制刷新后，上傳就正常了，然后發現編輯里還不行，那是因為ueditor也有限制，接著操作。

打開coreextendueditorphpconfig.json，在圖片相關的配置代碼后面都增加webp，下面是修改后的全部代碼，替換或者對照修改后保存，強制刷新后臺頁面。

為避免以下代碼某些字符被處理，提供個config.json文件，點擊下載

/*?前后端通信相關的配置,注釋只允許使用多行方式?*/
{
????/*?上傳圖片配置項?*/
????"imageActionName":?"uploadimage",?/*?執行上傳圖片的action名稱?*/
????"imageFieldName":?"upfile",?/*?提交的圖片表單名稱?*/
????"imageMaxSize":?20480000,?/*?上傳大小限制，單位B?*/
????"imageAllowFiles":?[".png",?".jpg",?".jpeg",?".gif",?".bmp",?".webp"],?/*?上傳圖片格式顯示?*/
????"imageCompressEnable":?false,?/*?是否壓縮圖片,默認是true?*/
????"imageCompressBorder":?1600,?/*?圖片壓縮最長邊限制?*/
????"imageInsertAlign":?"none",?/*?插入的圖片浮動方式?*/
????"imageUrlPrefix":?"",?/*?圖片訪問路徑前綴?*/
????"imagePathFormat":?"/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",?/*?上傳保存路徑,可以自定義保存路徑和文件名格式?*/
????????????????????????????????/*?{filename}?會替換成原文件名,配置這項需要注意中文亂碼問題?*/
????????????????????????????????/*?{rand:6}?會替換成隨機數,后面的數字是隨機數的位數?*/
????????????????????????????????/*?{time}?會替換成時間戳?*/
????????????????????????????????/*?{yyyy}?會替換成四位年份?*/
????????????????????????????????/*?{yy}?會替換成兩位年份?*/
????????????????????????????????/*?{mm}?會替換成兩位月份?*/
????????????????????????????????/*?{dd}?會替換成兩位日期?*/
????????????????????????????????/*?{hh}?會替換成兩位小時?*/
????????????????????????????????/*?{ii}?會替換成兩位分鐘?*/
????????????????????????????????/*?{ss}?會替換成兩位秒?*/
????????????????????????????????/*?非法字符??:?*???"??|?*/
????????????????????????????????/*?具請體看線上文檔:?fex.baidu.com/ueditor/#use-format_upload_filename?*/

????/*?涂鴉圖片上傳配置項?*/
????"scrawlActionName":?"uploadscrawl",?/*?執行上傳涂鴉的action名稱?*/
????"scrawlFieldName":?"upfile",?/*?提交的圖片表單名稱?*/
????"scrawlPathFormat":?"/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",?/*?上傳保存路徑,可以自定義保存路徑和文件名格式?*/
????"scrawlMaxSize":?20480000,?/*?上傳大小限制，單位B?*/
????"scrawlUrlPrefix":?"",?/*?圖片訪問路徑前綴?*/
????"scrawlInsertAlign":?"none",

????/*?截圖工具上傳?*/
????"snapscreenActionName":?"uploadimage",?/*?執行上傳截圖的action名稱?*/
????"snapscreenPathFormat":?"/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",?/*?上傳保存路徑,可以自定義保存路徑和文件名格式?*/
????"snapscreenUrlPrefix":?"",?/*?圖片訪問路徑前綴?*/
????"snapscreenInsertAlign":?"none",?/*?插入的圖片浮動方式?*/

????/*?抓取遠程圖片配置?*/
????"catcherLocalDomain":?["127.0.0.1",?"localhost",?"img.baidu.com"],
????"catcherActionName":?"catchimage",?/*?執行抓取遠程圖片的action名稱?*/
????"catcherFieldName":?"source",?/*?提交的圖片列表表單名稱?*/
????"catcherPathFormat":?"/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",?/*?上傳保存路徑,可以自定義保存路徑和文件名格式?*/
????"catcherUrlPrefix":?"",?/*?圖片訪問路徑前綴?*/
????"catcherMaxSize":?20480000,?/*?上傳大小限制，單位B?*/
????"catcherAllowFiles":?[".png",?".jpg",?".jpeg",?".gif",?".bmp",?".webp"],?/*?抓取圖片格式顯示?*/

????/*?上傳視頻配置?*/
????"videoActionName":?"uploadvideo",?/*?執行上傳視頻的action名稱?*/
????"videoFieldName":?"upfile",?/*?提交的視頻表單名稱?*/
????"videoPathFormat":?"/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}",?/*?上傳保存路徑,可以自定義保存路徑和文件名格式?*/
????"videoUrlPrefix":?"",?/*?視頻訪問路徑前綴?*/
????"videoMaxSize":?204800000,?/*?上傳大小限制，單位B，默認100MB?*/
????"videoAllowFiles":?[
????????".flv",?".swf",?".mkv",?".avi",?".rm",?".rmvb",?".mpeg",?".mpg",
????????".ogg",?".ogv",?".mov",?".wmv",?".mp4",?".webm",?".mp3",?".wav",?".mid"],?/*?上傳視頻格式顯示?*/

????/*?上傳文件配置?*/
????"fileActionName":?"uploadfile",?/*?controller里,執行上傳視頻的action名稱?*/
????"fileFieldName":?"upfile",?/*?提交的文件表單名稱?*/
????"filePathFormat":?"/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",?/*?上傳保存路徑,可以自定義保存路徑和文件名格式?*/
????"fileUrlPrefix":?"",?/*?文件訪問路徑前綴?*/
????"fileMaxSize":?204800000,?/*?上傳大小限制，單位B，默認50MB?*/
????"fileAllowFiles":?[
????????".png",?".jpg",?".jpeg",?".gif",?".bmp",".webp",
????????".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",?/*?執行圖片管理的action名稱?*/
????"imageManagerListPath":?"/upload/image/",?/*?指定要列出圖片的目錄?*/
????"imageManagerListSize":?20,?/*?每次列出文件數量?*/
????"imageManagerUrlPrefix":?"",?/*?圖片訪問路徑前綴?*/
????"imageManagerInsertAlign":?"none",?/*?插入的圖片浮動方式?*/
????"imageManagerAllowFiles":?[".png",?".jpg",?".jpeg",?".gif",?".bmp",?".webp"],?/*?列出的文件類型?*/

????/*?列出指定目錄下的文件?*/
????"fileManagerActionName":?"listfile",?/*?執行文件管理的action名稱?*/
????"fileManagerListPath":?"/upload/file/",?/*?指定要列出文件的目錄?*/
????"fileManagerUrlPrefix":?"",?/*?文件訪問路徑前綴?*/
????"fileManagerListSize":?20,?/*?每次列出文件數量?*/
????"fileManagerAllowFiles":?[
????????".png",?".jpg",?".jpeg",?".gif",?".bmp",".webp",
????????".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"
????]?/*?列出的文件類型?*/

}

修改了類似下方截圖的位置，頁面中有幾處都要修改增加webp。

到此，webp格式可以在后臺位置任意上傳了。

最后更新于 2020-10-23 17:26:40 本文來源:https://www.pbhtml.com/189.html略有修改

相關知識點： 圖片上傳 webp