Flask-Dropzone:为你的项目添加文件上传功能

前几天在Stack Overflow上看到一个关于Dropzone.js的问题设了100rep的bounty,就去研究了一下。拿到bounty后,顺便写了一个小demo。这时发现,如果有一个集成Dropzone.js到Flask,并且简化设置步骤的扩展,肯定要比其他上传方式要简单的多。

所以就有了Flask-Dropzone。

你只需要添加一些配置就可以实现上传,当然,你还要自己处理文件。

Flask-Dropzone

Flask-Dropzone上传截图

项目地址:https://github.com/greyli/flask-dropzone

用法说明

1、使用pip安装:

2、像其他扩展一样初始化:

3、在模板的头部加入下面这行代码:

4、在你想要上传文件的地方使用create()方法:

记得把action_view的值更改成你要处理文件上传的的视图端点值。

美化上传区域

使用style()方法可以为上传区域添加自定义样式:

配置选项

支持的配置如下:

Name Default Value Info
DROPZONE_SERVE_LOCAL False default to use CDN
DROPZONE_MAX_FILE_SIZE 3 unit: MB
DROPZONE_INPUT_NAME file <input type="file" name="file">
DROPZONE_ALLOWED_FILE_CUSTOM False see detail below
DROPZONE_ALLOWED_FILE_TYPE 'default' see detail below
DROPZONE_MAX_FILES ‘null’ the max files user can upload once
DROPZONE_DEFAULT_MESSAGE “Drop files here to upload” message displayed on drop area
DROPZONE_INVALID_FILE_TYPE “You can’t upload files of this type.” error message
DROPZONE_FILE_TOO_BIG “File is too big {{filesize}}. Max filesize: {{maxFilesize}}MiB.” error message
DROPZONE_SERVER_ERROR “Server error: {{statusCode}}” error message
DROPZONE_BROWSER_UNSUPPORTED “Your browser does not support drag’n’drop file uploads.” error message
DROPZONE_MAX_FILE_EXCEED “Your can’t upload any more files.” error message

最后的六个信息你可以修改成中文。

你可以使用下面这些文件类型:

如果你想要自己定义允许的文件类型,你需要把 DROPZONE_ALLOWED_FILE_CUSTOM 设为 True,然后添加mime类型或文件后缀到 DROPZONE_ALLOWED_FILE_TYPE,比如这样:

具体参考dropzone.js的文档

示例程序

源码可以在这里找到:https://github.com/greyli/flask-dropzone/tree/master/example

待办事项

未来我打算把文件名处理也加进扩展里。

 

说说你的想法吧!

邮箱不会被公开,必填项已用*标出。

*

*