資訊專欄INFORMATION COLUMN
摘要：上傳文件，需要使用到的控件，其為。提供了一個美觀且功能強大上傳控件，樣式如下它提供文件的預覽，并且自帶和按鈕。此時修改頭像的頁面是這樣的，我們先完成功能，后續再美化。修改視圖函數，如下這里用了庫的來處理路徑相關的東西。
上傳文件，需要使用到html的input控件，其type為file。Boostrap提供了一個美觀且功能強大上傳控件，樣式如下：
它提供文件的預覽，并且自帶remove和upload按鈕。要使用這個控件，需要再額外引入相應的js和css文件，如下：
上傳控件的html代碼如下：
我把data-show-preview設置為false，關閉了上傳文件的預覽，更多關于這個控件的內容可以自行搜索。
此時修改頭像的頁面是這樣的，我們先完成功能，后續再美化。
那么如何獲取上傳的文件呢，與獲取POST數據類似（上傳文件其實也是使用POST方法），在flask中使用request.files[name]獲取上傳的文件，其中name為對應input控件的name值（name="avatar_upload"），然后使用文件的save方法即可保存。例如:
@app.route("/user/avatar/", methods=["GET", "POST"])
def avatar():
if request.method == "GET":
return render_template("avatar.html")
else:
file = request.files["avatar_upload"]
path = "D:FlaskHarpQAstatic"
file.save(path + file.filename)
return "Saved"
注意save方法要加上具體的路徑，默認不會保存到py文件所在的路徑，而是系統的根目錄，此時會提示Permission denied。我們接下來要把上傳的文件設置為用戶的新頭像，其實可以直接將user的avatar_path修改為上傳文件的路徑，這樣整個功能就完成了，但為了規范，我們建立一個文件夾專門存放頭像文件（static/images/uploads），并且以用戶id來命名文件，這樣就避免出現文件名重復導致被覆蓋。修改視圖函數，如下：
@app.route("/user/avatar/", methods=["GET", "POST"])
def avatar():
if request.method == "POST":
file = request.files["avatar_upload"]
base_path = path.abspath(path.dirname(__file__))
filename = str(g.user.id) + "." + file.filename.rsplit(".", 1)[1]
file_path = path.join(base_path, "static", "images", "uploads", filename)
file.save(file_path)
g.user.avatar_path = "images/uploads/" + filename
db.session.commit()
return render_template("avatar.html")
這里用了os庫的path來處理路徑相關的東西。隨便瀏覽個本地圖片并上傳，效果如下：
此時文件已經上傳到了uploads文件夾：
數據圖中的avatar_path也更新了：
此外，我們還可以添加上傳文件大小限制，安全限制等更多的功能，在此就不演示了。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/41294.html
摘要：參考效果引入使用結構頭像頭像截圖彈窗取消截圖頭像保存引用具體使用可查看官網修改頭像參加文件點擊圖片初始化關閉彈窗保存截圖保存數據 參考效果：http://www.17sucai.com/previe... 引入cropper使用 HTML結構 頭像 ...
摘要：參考效果引入使用結構頭像頭像截圖彈窗取消截圖頭像保存引用具體使用可查看官網修改頭像參加文件點擊圖片初始化關閉彈窗保存截圖保存數據 參考效果：http://www.17sucai.com/previe... 引入cropper使用 HTML結構 頭像 ...
摘要：到目前為止我們的博客處理的都是文字。比如說圖片上傳是年月日，則圖片會保存在中。添加標簽用于上傳圖片。除了上傳，圖片的處理還包括驗證格式改變尺寸更名裁剪美化等多種多樣的需求。如果上傳的圖片重名，會導致報錯嗎請試試看。 到目前為止我們的博客處理的都是文字?，F代互聯網早就進入了讀圖時代，圖片的維護、展示也就相當重要。 上一章中預留了avatar字段，用來保存用戶上傳的頭像，現在我們來實現這個...
摘要：版本也是我最喜歡的方式這個代碼有點黏在一起了湊合看把李昊天創建實例服務器異步接受地址指定選擇文件的按鈕容器禁止多選不壓縮選擇之后自動上傳防止低版本瀏覽器用到了只允許選擇圖片文件。 TP5整合阿里云OSS上傳文件第二節,上傳頭像實現首先先看一個效果圖上傳失敗效果圖:showImg(https://segmentfault.com/img/bVbaJLZ?w=983&h=561);上傳成功...
閱讀 825·2023-04-26 00:13
閱讀 2794·2021-11-23 10:08
閱讀 2432·2021-09-01 10:41
閱讀 2112·2021-08-27 16:25
閱讀 4177·2021-07-30 15:14
閱讀 2359·2019-08-30 15:54
閱讀 857·2019-08-29 16:22
閱讀 2736·2019-08-26 12:13
