前端--->服務(wù)器
用戶在前端直接點(diǎn)擊上傳圖片髓梅，圖片則直接保存在服務(wù)器本地褒脯，這樣編程雖然簡(jiǎn)單，但是當(dāng)圖片逐漸多起來的時(shí)候坟募，就會(huì)很占服務(wù)器的磁盤資源岛蚤，并且如果想對(duì)圖片做一些處理，比如控制圖片大小懈糯，是否加上水印等等就很麻煩涤妒。所以不推薦使用該保存方式。示例代碼：
前端主要代碼：
<form action="{{ url_for('upload_row') }}" method="post" enctype="multipart/form-data">
<label for="fid"><input type="file" id="fid" name="f1"></label>
<input type="submit" value="上傳">
</form>
后端代碼：
# 保存到服務(wù)器本地
@cms_bp.route("/upload_row/", endpoint="upload_row", methods=["GET", "POST"])
def upload_row():
# 文件對(duì)象保存在request.files上赚哗，并且通過前端的input標(biāo)簽的name屬性來獲取
fp = request.files.get("f1")
# 保存文件到服務(wù)器本地
fp.save("a.jpg")
return redirect(url_for("cms.index"))
前端--->服務(wù)器--->七牛云
用戶先將圖片上傳到服務(wù)器她紫，服務(wù)器做一些過濾等其他圖片處理操作后硅堆，再將圖片上傳到七牛云上，服務(wù)器只需要保存七牛云返回的圖片外鏈贿讹，這樣就可以大大的節(jié)省服務(wù)器空間渐逃，但是這個(gè)過程服務(wù)器既需要接收用戶的請(qǐng)求，又需要請(qǐng)求七牛云围详，這樣就很占服務(wù)器帶寬朴乖，降低性能。
前端代碼：
<form action="{{ url_for('upload_qn') }}" method="post" enctype="multipart/form-data">
<label for="fid2"><input type="file" id="fid2" name="f2"></label>
<input type="submit" value="上傳">
</form>
后端代碼：
from qiniu import Auth, put_data
# 用戶上傳到服務(wù)器助赞，服務(wù)器再上傳到七牛云
@cms_bp.route("/upload_qn/", endpoint="upload_qn", methods=["GET", "POST"])
def upload_qiniu():
fp = request.files.get("f2")
file_name = fp.filename
# 需要填寫你的 Access Key 和 Secret Key
ak = "******"
sk = "******"
# 構(gòu)建鑒權(quán)對(duì)象
q = Auth(ak, sk)
# 要上傳的空間
bucket_name = 'shop'
# 上傳到七牛后保存的文件名
key = file_name
# 生成上傳 Token买羞，可以指定過期時(shí)間等
token = q.upload_token(bucket_name, key, 3600)
ret, info = put_data(token, key, data=fp.read())
# 如果上傳成功
if info.status_code == 200:
# 數(shù)據(jù)庫(kù)保存該地址
img_url = "七牛云域名" + ret.get("key")
return "success"
前端--->七牛云
為了省去中間途徑服務(wù)器的消耗，前端可以直接上傳圖片到七牛云雹食，七牛云返回該圖片的外鏈畜普，我們則將外鏈保存到一個(gè)隱藏的input標(biāo)簽上，最后前端提交form表單時(shí)將外鏈提交到服務(wù)器保存群叶，因?yàn)樵撨^程會(huì)使用到很多七牛云為我們寫好的JS吃挑，具體開發(fā)教程請(qǐng)參考七牛云JS SDK文檔。這只貼出主要代碼街立。
前端代碼：
<button id="upload-btn">上傳文件</button>
<input type="text" id="image-input">
<img src="" alt="" id="img" width="50px">
前端的所有效果通過JS實(shí)現(xiàn)舶衬，具體JS參考開發(fā)文檔。
后端代碼：
后端只需要編程生成上傳圖片的token即可
from qiniu import Auth
# 前端直接上傳到七牛云
@cms_bp.route("/generate_token/", endpoint="ge_token")
def generate_token():
# 需要填寫你的 Access Key 和 Secret Key
access_key = current_app.config.get("ACCESSKEY")
secret_key = current_app.config.get("SECRETKEY")
# 構(gòu)建鑒權(quán)對(duì)象
q = Auth(access_key, secret_key)
# 要上傳的空間
bucket_name = 'shop'
# 生成上傳 Token赎离，可以指定過期時(shí)間等
# 3600為token過期時(shí)間逛犹，秒為單位。3600等于一小時(shí)
token = q.upload_token(bucket_name, expires=3600)
return jsonify({"uptoken": token})
總結(jié)：最后一種圖片上傳方式梁剔，可以將流量的消耗直接轉(zhuǎn)加給用戶虽画，減輕服務(wù)器壓力，所以推薦第三種方式荣病，并且七牛云上提供了很多定制化的接口码撰，可以對(duì)圖片、視頻等等作出定制化處理个盆，第三種方式的js很長(zhǎng)脖岛，大家可以去開發(fā)文檔查看，修改成自己需要的颊亮，如果不成功鸡岗，可以給我留言，我發(fā)給你Demo编兄。
