潭州课堂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 版本提交

转载于:https://www.cnblogs.com/gdwz922/p/10421549.html

潭州课堂25班：Ph201805201 tornado 项目第三课项目图片上传，展示（课堂笔记）...相关推荐

kindeditor java_kindeditor在Java项目中的应用以及图片上传配置
在官网下载Kindededitor的开发包在项目中javaweb项目中导入kindeditor必须要使用的Jar包(用于文件上传,除非你的富文本编辑器不使用图片上传)jar包可以在官网的开发包中找到 ...
vue项目 vue-quill-editor富文本编辑器+图片上传
目录基础使用: 进阶版: 使用 el-upload 图片上传: 进阶版2.0: 可拖动调整图片大小: 基础使用: 富文本编辑器: 此方法得到的图片为base64编码,图片上传在下面. npm ins ...
vue项目引入富文本编辑，图片上传/视频上传
1:下载富文本和更改图片大小 npm install quill-image-resize-module --save//更改img图片大小 npm install vue-quill-editor ...
Java分布式二手房项目尚好房第五课图片上传及前端房源展示
尚好房:图片上传一.图片存储方案 1.介绍在实际开发中,我们会有很多处理不同功能的服务器.例如: 应用服务器:负责部署我们的应用数据库服务器:运行我们的数据库文件服务器:负责存储用户上传文件的 ...
后盾网lavarel视频项目---图片上传
后盾网lavarel视频项目---图片上传一.总结一句话总结: 前端还是普通的前端操作,前端上传图片的地址就是图片上传的路由,后端代码也很简单 public function uploader(R ...
在线相册，图片上传，基于 Spring boot vuejs element ui mysql 的项目
最近想学关于vuejs 和 element ui ,趁着工作之余开发了一个在线相册的项目,功能有注册,登录,预览,各种中心,图片上传,我的资源,图片编辑等,,在此做一个分享吧. Git 地址 :ht ...
商城项目笔记一：搭建Maven工程，利用Dubbo实现SOA面向服务框架，部署zookeeper注册中心，FastDFS框架实现图片上传，部署nginx服务器。
文章目录 1. 商城项目总结笔记: 1.1. 第一天工作记录:搭建Maven工程 1.2. 第二天工作记录:创建SOA面向服务架构,通过工具类实现分页技术 1.3. 第三天工作记录:部署nginx服务 ...
springboot项目打包为docker镜像并上传nexus私服
springboot项目docker打包镜像上传Nexus私服 1.springboot项目打包为docker镜像并上传nexus私服 1.0. 必要条件 1.1.开启docker远程访问 1.2.配 ...
themyleaf 图片上传_javaEE --springboot #实现图片上传和回显 #单文件上传 #多文件上传 #ajax异步文件上传（非常详细，从创建项目开始）...
实现文件上传和回显 1.新建一个SpringBoot项目,选择 Spring Web 和 thymeleaf 依赖 .pow.xml文件下的依赖如下 2.根据下图,创建如下文件 3.直接上代码配置文 ...
vue项目中的h5图片上传（处理上传的时候图片被旋转的问题，并压缩图片大小）
vue的图片上传这个页面实现的主要是实现创建球队功能,里面包含队徽,球队类型,球队名称,所属地址这里除了图片上传还有一个地址的三级联动功能,这里我把这个页面都贴上来了.这个项目中使用vux作为ui ...

潭州课堂25班：Ph201805201 tornado 项目第三课项目图片上传，展示（课堂笔记）...

tornado 相关说明

潭州课堂25班：Ph201805201 tornado 项目第三课项目图片上传，展示（课堂笔记）...相关推荐

最新文章

热门文章

潭州课堂25班：Ph201805201 tornado 项目 第三课 项目 图片上传，展示 （课堂笔记）...

tornado 相关说明

潭州课堂25班：Ph201805201 tornado 项目 第三课 项目 图片上传，展示 （课堂笔记）...相关推荐

最新文章

热门文章

潭州课堂25班：Ph201805201 tornado 项目第三课项目图片上传，展示（课堂笔记）...

潭州课堂25班：Ph201805201 tornado 项目第三课项目图片上传，展示（课堂笔记）...相关推荐