導語 | COS控制檯新上線了檔案預覽功能,使用者可在控制檯內直接預覽、編輯檔案內容。

前不久,微軟釋出了 vscode for web 的公告,是基於web的線上程式碼編輯器,無需下載安裝可以直接在web瀏覽器中執行,同時支援斷點除錯、版本管理、團隊開發等功能。全球最大的程式碼託管網站 github.com,也在網頁端支援了線上編輯模式。人們對線上開發的熱情被再次點燃。

同樣是管理雲上檔案的騰訊雲 COS,也在控制檯推出了更便捷的線上管理檔案的功能!

一、COS 控制檯更新 - 檔案預覽和線上編輯

檔案預覽:提供了線上檢視檔案內容的功能,如線上播放音視訊、檢視 ppt/pdf 等文件。

檔案編輯:方便開發者隨時隨地編輯 COS 儲存桶檔案,如線上修改靜態網站程式碼、Markdown 文件。

二、如何使用

(一)檔案線上編輯

線上編輯依賴 COSBrowser Web 版來實現。COSBrowser 客戶端版大家已經非常熟悉了,WebIDE 的普及越來越廣,COSBrowser 也推出了 Web 線上版,方便開發者隨時隨地管理 COS 儲存桶檔案,來支援在瀏覽器內編輯檔案內容的能力。

在騰訊雲 COS 控制檯,選擇儲存桶進入檔案列表頁,點選右上角“線上編輯器”連結,即可跳轉到 COSBrowser Web版編輯當前資料夾的檔案。如果想對當前目錄下的資料夾或檔案編輯,可以在“更多”找到編輯按鈕。



線上編輯COS儲存桶檔案

為了貼合開發者習慣,在COSBrowser web版裡檔案列表以目錄樹的形式在左邊展示,右邊為編輯區,使用者可像在vscode裡修改程式碼一樣,在編輯區修改內容,編輯完之後,Ctrl+s鍵儲存。再也不用按照以前那一套低效的下載--> 編輯 -- > 上傳來完成檔案的修改。

快捷方式一:按鍵盤快捷鍵進入編輯

如果你覺得這樣的方式太過於平庸,不適合Geek的你,我們還準備了更炫酷的功能給你,當你瀏覽COS控制檯檔案列表時,只需要點選鍵盤上的 . 鍵,即可進入線上編輯器,如下圖:

快捷方式二:修改url地址進入編輯

你也可以通過修改檔案列表的url來達到這個目的,將 url 中的 /bucket 改為 /dev,如 https://console.cloud.tencent.com/cos5/dev?... ,同樣可以進入編輯當前資料夾。

(二)檔案預覽

首先選擇儲存桶進入檔案列表頁,點選操作欄的預覽按鈕;

目前支援 圖片、視訊、音訊、文件、程式碼文字 等幾乎所有的檔案型別。



預覽圖片



視訊播放



PPT文件預覽



Excel文件預覽

有了檔案預覽,我們再也不需要下載到本地打開了,直接在頁面一鍵預覽,省時省力。

三、如何在自己的網站實現

(一)文件預覽

除了瀏覽器自身顯示的檔案,COS 針對 docx、xlsx、pptx 等複雜文件檔案,推出了文件預覽功能,開發者只要在控制檯開啟文件預覽功能,在物件的訪問URL上加上預覽引數?ci-process=doc-preview&dstType=html 即可使用,如 :

https://ci-h5-demo-1258125638.cos.ap-chengdu.myqcloud.com/defaults/defaultSlides.pptx?ci-process=doc-preview&dstType=html

(二)播放視訊

在 Web 端實現視訊播放,推薦使用騰訊雲點播的“超級播放器”,不僅支援 RTMP、FLV、HLS、MP4 等格式,更提供了豐富的音視訊播放場景的實用功能。

(三)線上編輯

COSBrowser Web 的線上編輯器,使用了體驗接近 vscode 的 monaco editor,開發者可以自行在自己網站實現編輯。

四、寫在最後

後續,我們會繼續深化研究,提供更加人性化的功能給到大家,敬請期待。歡迎體驗和反饋建議。