Flask 使用 Ckeditor4 上傳圖片至 AWS S3，輕鬆實現圖片存儲

By David August 24, 2023

由於我在2023年初開始使用Python flask建立自己的部落格，除了練習網頁架設外，也多一個平台可以記錄生活以及 python 練習的紀錄。由於開始寫部落格，發現雖然Ckeditor是一個很好用的富文本編輯器，但是上傳圖片一直是困繞我的問題。因為網站架設server的儲存空間只有1G，不可能把文章的圖檔直接儲存在網站的伺服器上。

Google drive雖然也可以設定共享，並且轉換成embeding url讓圖片呈現在文章中，但是缺點是顯示速度比較慢、操作不直覺需要先上傳到google drive再貼連結到ckeditor的圖片編輯器，而且比較多人同時開網頁時就可能會報錯，導致圖片無法正常顯示。如果你的side project 可以接受的話，可以參考我之前寫的文章( https://www.danpoints.com/blog/6 )。

這次想要分享的是使用Ckeditor的圖片上傳功能，搭配AWS S3作為圖檔的存儲空間。好處是上傳圖片的過程更直覺，可以直接在撰寫文章時插入圖片，同時在顯示圖片時相當穩定且快速。

(在Ckeditor直接上傳圖片，並返回圖片網址)

AWS S3服務連結設定

1. 前往 AWS官網申請帳戶，第一次申請會有12個月的優惠試用期(本次需要使用的S3也在優惠項目中)。

2. 在搜尋欄搜尋S3，並點擊進入S3服務。

3. 點擊建立儲存貯體，同時下滑取消『封鎖公開存取』，這樣之後鑲嵌在網站上的圖片才能正常顯示。但請記住比較機密的資料不能存在這個bucket中，如有需要應該額外建立儲存貯體存放。

4. 接下來要開始設定python連結S3服務的帳號，一樣在搜尋欄搜尋IAM並點擊進入服務。

5. 點擊使用者群組後，點建立群組。命名完成後在連接許可政策中搜尋s3，並勾選『AmazonS3FullAccess』。

6. 建立完群組後點擊左側『使用者』，選擇建立使用者，往下在設定許可中勾選剛剛建立的使用者群組，現在這個帳號就可以連結到S3的服務了。

7. 點擊剛剛建立的user，點擊『安全憑證』，往下滑到『存取金鑰』中點擊『建立存取金鑰』，最後選擇『在AWS外部執行的應用程式』即可取得你的兩組金鑰，請務必存好後續會使用到。

8. 最後回到S3中上傳一張圖片做測試。點擊檔案後複製『物件url』的前半部網址到.com，後續撰寫python code會需要使用。

Python Ckeditor上傳與儲存至AWS S3

這一部分需要開始開發python code，如果不知道如何在flask app中使用ckeditor的讀者可以參考這篇文章( https://www.danpoints.com/blog/15 )。

在原本的Ckeditor configure中加入upload的設定。
將剛剛取得的AWS金鑰代入，並且設定剛剛建立的S3 bucket名稱。
取得Ckeditor的上傳檔案後，透過boto3套件上傳到AWS S3儲存，並返回image url給Ckeditor，最終完成上傳圖片並且插入的功能。

from flask import Flask, request, render_template
from flask_ckeditor import CKEditor, upload_success, upload_fail
import boto3
import time

app = Flask(__name__)
ckeditor = CKEditor(app)

# AWS S3配置
aws_access_key = 'your_access_key'
aws_secret_key = 'your_secret_key'
s3_bucket_name = 'your_bucket_name'

# CKEditor配置
app.config['CKEDITOR_FILE_UPLOADER'] = '/upload'  # 路由，用於上傳圖片

# 圖片上傳路由
@app.route('/upload', methods=['POST'])
def upload():
    # Get the current time in timestamp format
    current_timestamp = str(int(time.time()))
    file = request.files.get('upload')
    # Add more validations here
    extension = file.filename.split('.')[-1].lower()
    if extension not in ['jpg', 'gif', 'png', 'jpeg']:
        return upload_fail(message='Image only!')
    # upload file to S3
    s3 = boto3.client('s3', aws_access_key_id=aws_access_key, aws_secret_access_key=aws_secret_key)
    #透過時間戳記來命名檔案，避免重複
    s3.upload_fileobj(file, s3_bucket_name, f'{current_timestamp}_{file.filename}')
    img_url = f'貼上步驟8複製的url/{current_timestamp}_{file.filename}'
    return upload_success(img_url, filename=file.filename)  # return upload_success call

@app.route('/')
def index():
    return render_template('index.html')  # 使用包含CKEditor的HTML模板

if __name__ == '__main__':
    app.run(debug=True)

透過AWS S3儲存的檔案讀取相當快速且穩定，重點是AWS S3儲存費用相當便宜，相當適合沒有盈利能力的side project。另外在網站上也可以透過Ckeditor的既有功能明顯優化插入圖片的流程，此次使用Ckediotr就可以省去上傳介面、java code的開發，只要把後端儲存的功能用python開發完成即可。本次的開發真的明顯減少我撰寫部落格的時間，同時也讓我開始了解AWS雲服務的架構，是個相當有效的優化和學習經驗。

DanPoints