Flash web development is basically finished, but I still need to review it later. But I always feel that my blog is a little crude, so I’m using my brain to develop new functions
Today, I think of the most basic function, custom avatar
This kind of function is designed into two basic function blocks
1: How to upload and save files
2: How to link avatar photos with users in user model
Second, after consulting the discussion on the Internet, I come to two basic methods,
The first is to store the image in the database after it is binary
The second is to store the image directly in the file system
First study how to upload a file successfully
Start with the simplest
In the views file of main, add the following preparations
import os
from flask import Flask, request, redirect, url_for
UPLOAD_FOLDER=r'E:\flasky\app\upload'Set upload_ The path of folder, which indicates the location of the file
@main.route('/upload_file',methods = ['GET','POST'])
def upload_file():
#...
if request.method == 'POST':
file = request.files['file']
file.save(os.path.join(UPLOAD_FOLDER,file.filename))
return '<p>success</p>'
return '''
<!DOCTYPE html>
<title>Change new icon</title>
<h1>Upload new </h1>
<form action = "" method = "post" enctype=multipart/form-data>
<input type = "file" name = file>
<input type = "submit" value = Upload>
</form>
'''Then a separate route is made for the upload file function, which is to provide the upload file with a special page
file= request.files [‘File ‘] indicates that the file corresponding to the file is retrieved from the files dictionary requested by the request. This file is a filestorage object, which we will talk about later
This file object has a function to save files, called save ()
The file object also has a property to extract the file name, called the file name
His parameter is the path name
As the above code, I used OS . path . Join splicing method to save the pathname
As for the return page after submitting and saving, I simply made a page showing success to indicate that the function is successful
The rendering of the whole page directly writes this form in return. Let’s take a look at the function
PS: in the user profile page, I have added a button to the page of changing the avatar. I won’t say much about that
Well, the most important part of the upload file has been completed, the next work is to improve the code
For example, add a range that specifies the allowed file types
ALLOWED_EXTENSIONS=set(['txt','pdf','png','jpg','jpeg','gif'])So the code becomes
UPLOAD_FOLDER=r'E:\flasky\app\upload'
ALLOWED_EXTENSIONS=set(['txt','pdf','png','jpg','jpeg','gif'])
def allowed_file(filename):
return '.' in filename and filename.rsplit('.',1)[1] in ALLOWED_EXTENSIONS
@main.route('/upload_file',methods = ['GET','POST'])
def upload_file():
if request.method == 'POST':
file = request.files['file']
if file and allowed_file(file.filename):
file.save(os.path.join(UPLOAD_FOLDER,file.filename))
return '<p>success</p>'
Return '< p > you uploaded a file type that is not allowed < / P >'
return '''
<!DOCTYPE html>
<title>Change new icon</title>
<h1>Upload new </h1>
<form action = "" method = "post" enctype=multipart/form-data>
<input type = "file" name = file>
<input type = "submit" value = Upload>
</form>
'''OK, so far, let’s go back to the description of the official flask document
First, the files property of request
So, it’s very convenient. You can go through it file.filename To get the name of the file directly
In addition, this file object can be directly saved with the save function. 2 can have two parameters. One is DST, which indicates the storage path. The second is the cache size, which indicates the size of the stored procedure. The default is 16kb.
Let’s take a look at the effect, we use MP3 suffix file to test
When I detect a file type that is not allowed, I return a prompt
Next, we’ll talk about the function secure_ filename () It is used to prevent some file names that can affect the operation of the system from disturbing your website
For example, as the official document says
Let’s look at the functions of this function. In fact, in order to ensure that the file name will not affect the system, he replaced the slashes and spaces in the file name with underscores
In this way, the file will only be used in the current directory, and will not be used to do other things due to the path problem.
Therefore, before saving the file, modify the file name through this function
@main.route('/upload_file',methods = ['GET','POST'])
def upload_file():
if request.method == 'POST':
file = request.files['file']
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
file.save(os.path.join(UPLOAD_FOLDER,filename))
return '<p>success</p>'
Return '< p > you uploaded a file type that is not allowed < / P >'
return '''
<!DOCTYPE html>
<title>Change new icon</title>
<h1>Upload new </h1>
<form action = "" method = "post" enctype=multipart/form-data>
<input type = "file" name = file>
<input type = "submit" value = Upload>
</form>
'''Let’s test the function again
Finally, there is another function, which is to immediately view the file that has just been uploaded
I created a JPG image file here
The function you need to use here is send_ from_ directory
We will upload the code to modify once again, to upload immediately after the preview
UPLOAD_FOLDER=r'E:\flasky\app\upload'
ALLOWED_EXTENSIONS=set(['txt','pdf','png','jpg','jpeg','gif'])
def allowed_file(filename):
return '.' in filename and filename.rsplit('.',1)[1] in ALLOWED_EXTENSIONS
@main.route('/upload_file',methods = ['GET','POST'])
def upload_file():
if request.method == 'POST':
file = request.files['file']
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
file.save(os.path.join(UPLOAD_FOLDER,filename))
return redirect(url_ for('.uploaded_ Jump to the preview page
Return '< p > you uploaded a file type that is not allowed < / P >'
return '''
<!DOCTYPE html>
<title>Change new icon</title>
<h1>Upload new </h1>
<form action = "" method = "post" enctype=multipart/form-data>
<input type = "file" name = file>
<input type = "submit" value = Upload>
</form>
'''
@main.route('/uploaded_file/<filename>')
def uploaded_file(filename):
return send_from_directory(UPLOAD_FOLDER,filename)I created a T . Jpg image, which uses the text box to write a sentence, that is, the following preview inside to see
So far, the basic upload and preview functions have been realized. Later, it has to be linked with the user’s Avatar, and we have to use our brains again.
The above example of flash upload custom avatar is the whole content shared by Xiaobian. I hope it can give you a reference, and I hope you can support developer more.