修改flask-file-uploader，到已有的flask项目中
参考：https://github.com/greyli/flask-file-uploader
1. vi app\__init__.py
def create_app(config_name):中添加
app.config['SECRET_KEY'] = 'hard to guess string'
app.config['UPLOAD_FOLDER'] = '/path/data/'
app.config['THUMBNAIL_FOLDER'] = '/path/data/thumbnail/'
app.config['MAX_CONTENT_LENGTH'] = 50 * 1024 * 1024
UPLOAD_FOLDER使用了绝对路径，不知如何使用相对路径。相对路径报错No such file ......
2. vi app\main\views.py
添加
import os
import PIL
from PIL import Image
import simplejson
import traceback
from flask import Flask, request, render_template, redirect, url_for, send_from_directory
from werkzeug import secure_filename
from ..lib.upload_file import uploadfile
def allowed_file(filename):
return '.' in filename and \
filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
def gen_file_name(filename):
"""
If file was exist already, rename it and return a new name
"""
i = 1
while os.path.exists(os.path.join(current_app.config['UPLOAD_FOLDER'], filename)):
name, extension = os.path.splitext(filename)
filename = '%s_%s%s' % (name, str(i), extension)
i += 1
return filename
def create_thumbnail(image):
try:
base_width = 80
img = Image.open(os.path.join(current_app.config['UPLOAD_FOLDER'], image))
w_percent = (base_width / float(img.size[0]))
h_size = int((float(img.size[1]) * float(w_percent)))
img = img.resize((base_width, h_size), PIL.Image.ANTIALIAS)
img.save(os.path.join(current_app.config['THUMBNAIL_FOLDER'], image))
return True
except:
#print traceback.format_exc()
return False
ALLOWED_EXTENSIONS = set(['txt', 'gif', 'png', 'jpg', 'jpeg', 'bmp', 'rar', 'zip', '7zip', 'doc', 'docx'])
IGNORED_FILES = set(['.gitignore'])
def allowed_file(filename):
return '.' in filename and \
filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
def gen_file_name(filename):
"""
If file was exist already, rename it and return a new name
"""
i = 1
while os.path.exists(os.path.join(current_app.config['UPLOAD_FOLDER'], filename)):
name, extension = os.path.splitext(filename)
filename = '%s_%s%s' % (name, str(i), extension)
i += 1
return filename
def create_thumbnail(image):
try:
base_width = 80
img = Image.open(os.path.join(current_app.config['UPLOAD_FOLDER'], image))
w_percent = (base_width / float(img.size[0]))
h_size = int((float(img.size[1]) * float(w_percent)))
img = img.resize((base_width, h_size), PIL.Image.ANTIALIAS)
img.save(os.path.join(current_app.config['THUMBNAIL_FOLDER'], image))
return True
except:
#print traceback.format_exc()
return False
@main.route('/', methods=['GET', 'POST'])
def index():
form = PostForm()
if current_user.can(Permission.WRITE_ARTICLES) and \
form.validate_on_submit():
post = Post(body=form.body.data,
author=current_user._get_current_object())
db.session.add(post)
return redirect(url_for('.index'))
page = request.args.get('page', 1, type=int)
show_followed = False
if current_user.is_authenticated:
show_followed = bool(request.cookies.get('show_followed', ''))
if show_followed:
query = current_user.followed_posts
else:
query = Post.query
pagination = query.order_by(Post.timestamp.desc()).paginate(
page, per_page=current_app.config['FLASKY_POSTS_PER_PAGE'],
error_out=False)
posts = pagination.items
return render_template('index.html', form=form, posts=posts,
show_followed=show_followed, pagination=pagination)
@main.route("/upload", methods=['GET', 'POST'])
def upload():
if request.method == 'POST':
files = request.files['file']
if files:
filename = secure_filename(files.filename)
filename = gen_file_name(filename)
mime_type = files.content_type
if not allowed_file(files.filename):
result = uploadfile(name=filename, type=mime_type, size=0, not_allowed_msg="File type not allowed")
else:
# save file to disk
uploaded_file_path = os.path.join(current_app.config['UPLOAD_FOLDER'], filename)
files.save(uploaded_file_path)
# create thumbnail after saving
if mime_type.startswith('image'):
create_thumbnail(filename)
# get file size after saving
size = os.path.getsize(uploaded_file_path)
# return json for js call back
result = uploadfile(name=filename, type=mime_type, size=size)
return simplejson.dumps({"files": [result.get_file()]})
if request.method == 'GET':
# get all file in ./data directory
files = [f for f in os.listdir(current_app.config['UPLOAD_FOLDER']) if os.path.isfile(os.path.join(current_app.config['UPLOAD_FOLDER'],f)) and f not in IGNORED_FILES ]
file_display = []
for f in files:
size = os.path.getsize(os.path.join(current_app.config['UPLOAD_FOLDER'], f))
file_saved = uploadfile(name=f, size=size)
file_display.append(file_saved.get_file())
return simplejson.dumps({"files": file_display})
return redirect(url_for('uploads'))
@main.route("/delete/<string:filename>", methods=['DELETE'])
def delete(filename):
file_path = os.path.join(current_app.config['UPLOAD_FOLDER'], filename)
file_thumb_path = os.path.join(current_app.config['THUMBNAIL_FOLDER'], filename)
if os.path.exists(file_path):
try:
os.remove(file_path)
if os.path.exists(file_thumb_path):
os.remove(file_thumb_path)
return simplejson.dumps({filename: 'True'})
except:
return simplejson.dumps({filename: 'False'})
# serve static files
@main.route("/thumbnail/<string:filename>", methods=['GET'])
def get_thumbnail(filename):
return send_from_directory(current_app.config['THUMBNAIL_FOLDER'], filename=filename)
@main.route("/data/<string:filename>", methods=['GET'])
def get_file(filename):
return send_from_directory(os.path.join(current_app.config['UPLOAD_FOLDER']), filename=filename)
@main.route('/uploads', methods=['GET', 'POST'])
def uploads():
return render_template('uploads.html')
注意在views.py中app对应是current_app
3. vi app\templates\uploads.html
修改index.html为uploads.html，改如下内容：
{% extends "base.html" %}
{% block title %}File Uploader{% endblock %}
{% block page_content %}
<div class="container">
<h1>上传图片</h1>
<br>
<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data">
<!-- Redirect browsers with JavaScript disabled to the origin page -->
<noscript><input type="hidden" name="redirect" value="http://blueimp.github.io/jQuery-File-Upload/"></noscript>
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>添加图片...</span>
<input type="file" name="file" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>开始上传</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>取消上传</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>删除</span>
</button>
<input type="checkbox" class="toggle">
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
</div>
<!-- The extended global progress state -->
<div class="progress-extended"> </div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
</form>
<br>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Notes</h3>
</div>
<div class="panel-body">
<ul>
<li>最大文件上传大小为<strong>50 MB</strong> (默认文件大小无限制)</li>
<li>只允许上传图像文件(<strong>TXT, JPG, GIF, PNG, BMP, RAR, ZIP, 7ZIP, DOC, DOCX</strong>)</li>
<li>可以从桌面<strong>拖曳 & 松开</strong> 文件到此网页(见 <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support">浏览支持</a>)</li>
</ul>
</div>
</div>
</div>
<!-- The blueimp Gallery widget -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
{% raw %}
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{%=file.name%}</p>
<strong class="error text-danger"></strong>
</td>
<td>
<p class="size">Processing...</p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
</td>
<td>
{% if (!i && !o.options.autoUpload) { %}
<button class="btn btn-primary start" disabled>
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
{% } %}
{% if (!i) { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
<td>
<span class="preview">
{% if (file.thumbnailUrl) { %}
<a href="https://ask.hellobi.com/{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
{% } %}
</span>
</td>
<td>
<p class="name">
{% if (file.url) { %}
<a href="https://ask.hellobi.com/{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
{% } else { %}
<span>{%=file.name%}</span>
{% } %}
</p>
{% if (file.error) { %}
<div><span class="label label-danger">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<span class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
{% if (file.deleteUrl) { %}
<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" name="delete" value="1" class="toggle">
{% } else { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
{% endraw %}
{% endblock %}
{% block scripts %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="static/js/vendor/jquery.ui.widget.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="http://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="http://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="http://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<!-- <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> -->
<!-- blueimp Gallery script -->
<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="static/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="static/js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="static/js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="static/js/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="static/js/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="static/js/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="static/js/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->
<script src="static/js/jquery.fileupload-ui.js"></script>
<!-- The main application script -->
<script src="static/js/main.js"></script>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->
<!--[if (gte IE 8)&(lt IE 10)]>
<script src="js/cors/jquery.xdr-transport.js"></script>
<![endif]-->
{% endblock %}
4. 修改baseboardside.html，添加一项uploads
5. 拷贝data, static, lib目录到app目录下
本站文章版权归原作者及原出处所有 。内容为作者个人观点， 并不代表本站赞同其观点和对其真实性负责。本站是一个个人学习交流的平台，并不用于任何商业目的，如果有任何问题，请及时联系我们，我们将根据著作权人的要求，立即更正或者删除有关内容。本站拥有对此声明的最终解释权。