潭州课堂25班:Ph201805201 tornado 项目 第三课 项目 图片上传,展示 (课堂笔记)
tornado 相关说明
f增加图片上传功能,
在 main.py ,文件中创建个 UploadHandler 类,用来处理图片上传
上传图片之前,要先渲染这个页面,所以定个 get 方法,把这个页面渲染出来 ,

在 templates 的模板中,创建这个页面,upload.html
之后还要在 app.py 文件中配置路由信息,

在 upload.html 文件添加 form 表单
{% extends 'base.html' %}
{% block title %}图片上传{% end %}
{% block content %}
<h3>上传图片</h3> <br>
<form action="/upload" enctype="multipart/form-data" method="post">
<input type="file" name="picture" >
<input type="submit">
</form>
{% end %}
在 static 文件中创建个 uploads 文件夹,用来存放上传的图片,
如下的类中就可以完成图片上传的功能

到此图片上传功能完成,可以做 git 版本提交

在 main.py 文件中 引入 glob
定义个方法,用来获取每张图片的路径

在 index 中调用这个方法,得到这个列表,在 html 中进行渲染



为了方便查看代码,可以创建个 utlis 的 python 包,在里边创建个 photo.py 的文件,
按 f6 把 get_img_path() 的函数重构

接下来,应用缩略图,我们用 pil,库实现
在这个虚拟环境下 pip install pillow
在 main.py 文件中,在该类中生成缩略图


在 explore.html 中展示缩略图
git 版本提交

潭州课堂25班:Ph201805201 tornado 项目 第三课 项目 图片上传,展示 (课堂笔记)的更多相关文章
- kindeditor在Java项目中的应用以及图片上传配置
在官网下载Kindededitor的开发包 在项目中javaweb项目中导入kindeditor必须要使用的Jar包(用于文件上传,除非你的富文本编辑器不使用图片上传)jar包可以在官网的开发包中 ...
- 潭州课堂25班:Ph201805201 tornado 项目 第六课 用户和图片分享的集成(课堂笔记)
tornado 相关说明 改善图片上传功能 ,生成唯一的 ID ,与路径拼接,生成 URL, 这里引用 uuid 的 python 库 在 photo.py 中创建个类,用来 辅助用户上传的图片,生 ...
- SpringBoot图片上传(三)——调用文件上传项目的方法(同时启动两个项目)
简单说明:图片上传有一个专门的工程A,提供了图片的上传和下载预览,工程B涉及到图片上传以及回显,都是调用的工程A的方法,言外之意就是要同时启动两个项目. 代码: //工程B的html代码 <di ...
- C#中富文本编辑器Simditor带图片上传的全部过程(MVC架构的项目)
描述:最近c#项目中使用富文本编辑器Simditor,记录一下以便以后查看. 注:此项目是MVC架构的. 1.引用文件 项目中引用相应的css和js文件,注意顺序不能打乱,否则富文本编辑器不会正常显示 ...
- c#中富文本编辑器Simditor带图片上传的全部过程(项目不是mvc架构)
描述:最近c#项目中使用富文本编辑器Simditor,记录一下以便以后查看. 注:此项目不是MVC架构的. 1.引用文件 项目中引用相应的css和js文件,注意顺序不能打乱,否则富文本编辑器不会正常显 ...
- django之创建第10-1个项目-图片上传并记录上传时间
1.百度云盘:django之创建第10-1个项目-图片上传并记录上传时间 2.主要修改的配置文件有3个,forms.views和models3个文件以及html 3.forms.py文件修改 #cod ...
- django之创建第10个项目-图片上传方式1
1.upload.HTMl <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang=& ...
- 关于web项目中的图片上传、并在前端显示问题(tomcat中配置文件上传虚拟路径)
一.数据库存储 直接把图片的二进制码存到数据库,可参考blog:http://blog.csdn.net/hope2jiang/article/details/590733 直接存图片在mysql上面 ...
- 图片上传5-多个图片上传,独立项目Demo和源码
图片上传,一次性可以上传多个图片,每个图片可以有名字.URL.排序.备注等字段.这是区别于使用百度WebUploader等多图上传工具的地方. 项目相关图片 Jar包管理:Maven用到的框架:Spr ...
随机推荐
- Vue-cli添加全局js
1.填写全局config.js function getConfig(str){ var ajaxurl = "http://112.80.39.92:8008/webservices/re ...
- XMind思维导图使用笔记
首先新建一个空白的图 以组织结构图(向下) 为例 1.双击组织结构图 创建一个空白的页面 2.随便选择一个风格 这时候出现工作台 现在里面只有一个中心主题 正文部分开始 1.如果想要添加一个子主题 ...
- 视频H265格式压缩,软件压缩方法,硬件的没有条件,没法测试。
libx265软压c:/ffmpeg/ffmpeg.exe -i input.mp4 -c:v libx265 -preset:v fast output.mp4 原文件大小:610.87mb 目标文 ...
- unable to access android sdk add-on list(转)
造成这个问题的原因可能有多种,下面两种方法,我亲自测试后可用,如果都不行,请在评论里告诉我,我会尽快帮你分析解决.左侧的文章分类中,Android Studio编译构建错误记录了我开发中遇到的所有编译 ...
- 字符转ASCII码
char k = '成'; int str = (int)k; Console.WriteLine(str); 结果25104就是‘成’对应的ASCII值
- WARN conf.FlumeConfiguration: Could not configure sink sink1 due to: No channel configured for sink: sink1 org.apache.flume.conf.ConfigurationException: No channel configured for sink: sink1
1.错误如下所示,启动flume采集文件到hdfs案例的时候,出现如下所示的错误: 大概是说No channel configured for sink,所以应该是sink哪里配置出现了错误,百度了一 ...
- centos6.x完全禁用IPv6的方法
https://blog.csdn.net/prettyshuang/article/details/51731890
- webpack学习笔记--区分环境
为什么需要区分环境 在开发网页的时候,一般都会有多套运行环境,例如: 在开发过程中方便开发调试的环境. 发布到线上给用户使用的运行环境. 这两套不同的环境虽然都是由同一套源代码编译而来,但是代码内容却 ...
- Javascript \x 反斜杠x 16进制 编解码
js 里 \x 开头的通常是16进制编码的数据,下面代码实现编解码: 解码 function decode(str){ return str.replace(/\\x(\w{2})/g,functio ...
- Python_函数_参数
def 是函数的关键字,Python解释器一旦执行到def,默认不执行 def li(): n = 8 n +=1 print(n) li() li2 = li li2() 结果: 9 9 ret ...