由於我在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直接上傳圖片，並返回圖片網址)
這一部分需要開始開發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雲服務的架構，是個相當有效的優化和學習經驗。
