前端的代码
前端的action表示你要把页面内容提交到哪个后端的视图上面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
{# 如果是多媒体资源一定要加上#}
{# enctype="multipart/form-data#}
<input type="file" name="file">
<input type="submit" value="上传">
</form>
</body>
</html>
后端的代码
from flask import Flask,render_template,request,send_from_directory,redirect,url_for
#send_from_directory表示从文件夹去找图片
import os
app = Flask(__name__)
@app.route('/')
def index():
return render_template('work/上传图片.html')
#告诉后端程序,如果查到了下面19行的图片,就保存
#保存到哪里呢?
UPLOAD_FOLDER = 'media'
#folder是文件的意思,告诉程序,这个函数的文件路径
#UPLOAD_FOLDER这个可以自定义。只要下面点save的时候传进去就行
@app.route('/upload',methods=['POST'])
def upload():
file = request.files.get('file')
#获取前端传的图片
if file:
file.save(os.path.join(UPLOAD_FOLDER,file.filename))#把图片保存在你写的路径里面
#如果文件存在的话,就存起来,
#file.filename获取图片的文件名字,可以做判断,
#也可以在上传的时候,是给文件取名字。
return redirect(url_for('show',name=file.filename))#上传图片完成之后就跳转视图,这酷爱用到了重定向
#但是重定向show视图的时候有参数,所以这块必须给参数一个值
#一般上传完图片之后,会展示出来
#一般的路径是http://127.0.0.1:5000/..../1.jpg
#是带参数的
@app.route('/show/<name>')
def show(name):#这块得把图片的名字接收过来
return send_from_directory(UPLOAD_FOLDER,name)
#ctrl + 鼠标点进去,看源码,做填空题,哈哈
#第一个表示图片的文件夹,第二个表示图片的名字
if __name__ == '__main__':
app.run(debug=True)
这个已经可以上传图片了,但是,还有一个问题,用户上传的可能不是图片,所以我们要加一些判断(如果视图里面有重定向,请求方法里面一定别忘记加get!!!!!)
from flask import Flask,render_template,request,send_from_directory,redirect,url_for
#send_from_directory表示从文件夹去找图片
import os
app = Flask(__name__)
@app.route('/')
def index():
return render_template('work/上传图片.html')
#告诉后端程序,如果查到了下面19行的图片,就保存
#保存到哪里呢?
UPLOAD_FOLDER = 'media'
#folder是文件的意思,告诉程序,这个函数的文件路径
#UPLOAD_FOLDER这个可以自定义。只要下面点save的时候传进去就行
#为了防止用户乱上传,我们需要规定上传的类型
#这块是自定义的
ALLOW = ['txt','pdf','png','jpg','jpeg','gif']
#定义一个函数,设置一个参数
def allow_file(filename):
return '.' in filename and filename.rsplit('.',1)[1] in ALLOW
#表示点在这个参数里面,然后以点反向分割,分割一次,取下标为1的值(也就是第二个值)
#取到之后再判断是否在allow里面
#把结果返回给调用这个函数的地方
@app.route('/upload',methods=['POST','GET'])
def upload():
if request.method == 'GET':
return render_template('work/上传图片.html')
else:
#因为只支持了这两种方法,所以可以直接else
file = request.files.get('file')
#获取前端传的图片,这个也可以取到这个文件的文件名,也就是能接收到filename
if file:
#在这个地方判断一下用户上传的图片类型是否在allow里面
#先判断有没有这个文件,在判断是否合法
name = file.filename#取到文件的名字,赋值给name
if not allow_file(name):
#把文件名字传给这个参数,
return redirect(request.url)
#表示如果为flase的话,也就是文件名字不合法,就哪来的回哪去
#否则的话,就走下面的程序
file.save(os.path.join(UPLOAD_FOLDER,file.filename))#把图片保存在你写的路径里面
#如果文件存在的话,就存起来,
#file.filename获取图片的文件名字,可以做判断,
#也可以在上传的时候,是给文件取名字。
return redirect(url_for('show',name=file.filename))#上传图片完成之后就跳转视图,这酷爱用到了重定向
#但是重定向show视图的时候有参数,所以这块必须给参数一个值
#一般上传完图片之后,会展示出来
#一般的路径是http://127.0.0.1:5000/..../1.jpg
#是带参数的
@app.route('/show/<name>')
def show(name):#这块得把图片的名字接收过来
return send_from_directory(UPLOAD_FOLDER,name)
#ctrl + 鼠标点进去,看源码,做填空题,哈哈
#第一个表示图片的文件夹,第二个表示图片的名字
if __name__ == '__main__':
app.run(debug=True)
这个代码就比较完善了,可以判断用户上传的文件是否合法,还有一个小问题,文件的后缀名问题。
如果你允许上传.cfg后缀名的文件,而.cfg正好是配置文件,可能会因为路径问题就直接覆盖掉原来的文件,那这个程序有可能崩掉
所以还要判断一下
from werkzeug.utils import secure_filename
#这个可以帮助检验上传文件的名字
@app.route('/upload',methods=['POST','GET'])
def upload():
if request.method == 'GET':
return render_template('work/上传图片.html')
else:
#因为只支持了这两种方法,所以可以直接else
file = request.files.get('file')
#获取前端传的图片,这个也可以取到这个文件的文件名,也就是能接收到filename
if file:
#在这个地方判断一下用户上传的图片类型是否在allow里面
#先判断有没有这个文件,在判断是否合法
name = file.filename#取到文件的名字,赋值给name
if not allow_file(name):
#把文件名字传给这个参数,
return redirect(request.url)
#表示如果为flase的话,也就是文件名字不合法,就哪来的回哪去
#第一层校验成功,第二层校验一下是不是和配置文件的后缀名重复
name1 = secure_filename(name)
#有了这个之后,他会把路径改掉,不会让这个文件巧合的覆盖原来的配置文件
#但是这个文件有个缺点,不支持中文
#否则的话,就走下面的程序
file.save(os.path.join(UPLOAD_FOLDER,name1))#把图片保存在你写的路径里面
#如果文件存在的话,就存起来,
#file.filename获取图片的文件名字,可以做判断,
#也可以在上传的时候,是给文件取名字。
return redirect(url_for('show',name=name1))#上传图片完成之后就跳转视图,这酷爱用到了重定向
#但是重定向show视图的时候有参数,所以这块必须给参数一个值
认真看name1那块,那块开始了第二层校验,下面也有变动,
到这里上传图片算是完成了。
其实,编程就是翻译,得懂语法,要像英语一样能写出句子。