日记

好久没有分享过东西,一直在学习状态,学的并不好很多东西都没有,也写了很多demo,后续整理出来在分享,就不分享了,不为什么因为今天周六,好不容易双休,大早上的一个人醒来,刷刷知乎,听音乐、分享一篇简单的东西吧。

切入正题

问题的引入就是有关前端和后端的结合,基于tornado框架怎么上传图片到服务端?

H5、CSS图片上传


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<form class="form1" method="post" action="/add" enctype="multipart/form-data">
<input type="file" name="file_input" multiple="multiple"/>
<input type="submit" style="width: 100px;height: 40px;font-size: 20px;background-color: rgb(210,210,210)" value="确认增加">
</form>
</div>
</body>
</html> 这里是前端代码:如果不加上 multiple 就只能上传一个文件。enctype="multipart/form-data" 这个是必要的,必须写。

tornado代码


import os
import base64
import tornado.web
import tornado.ioloop
import tornado.options
from tornado.options import options, define
from PIL import Image # 进行tornadao渲染效果
define("port", 8001, type=int, help="this is server port") def img_copy(img_info):
"""
获取前端所传入的图片以及保存到自己本地和数据库各一份。这里以传入三张图比呀哦,你也可以根据需要二修改。
:param img_info:
:return:
"""
img1_name = dict(img_info[0])['filename']
img1_body = dict(img_info[0])['body']
img2_name = dict(img_info[1])['filename']
img2_body = dict(img_info[1])['body']
img3_name = dict(img_info[2])['filename']
img3_body = dict(img_info[2])['body']
all_base64 = [img1_name, img2_name, img3_name]
all_name = [img1_name, img2_name, img3_name]
all_body = [img1_body, img2_body, img3_body]
for i in range(len(all_name)):
with open('./static/person_img/' + all_name[i], 'wb') as f: # 保存到static路径下,这样图片就可以在前端展示了。
f.write(all_body[i])
sourch_path = './static/person_img/' + all_name[i]
im = Image.open(sourch_path)
out = im.resize((300, 300), Image.ANTIALIAS) # 重置图片的大小。
out = out.convert('RGB')
out.save(sourch_path)
# with open(sourch_path, 'rb') as f: #想抓为base64保存到数据库,后期通过数据库展示。
# base64_data = base64.b64encode(f.read())
# s = base64_data.decode()
# infos = 'data:image/jpeg;base64,%s' % s
# all_base64.append(infos)
# return all_base64 class AddHandler(tornado.web.RequestHandler):
"""
添加信息的类对象。
""" def get(self):
self.render('add.html') def post(self):
imgfile = self.request.files.get('file_input')
img_list = img_copy(imgfile) if __name__ == '__main__':
tornado.options.parse_command_line()
# 创建app
app = tornado.web.Application(
handlers=[
(r'/add', AddHandler),
],
template_path=os.path.join(os.path.dirname(__file__), "templates"),
static_path=os.path.join(os.path.dirname(__file__), "static"),
)
# 创建服务器
server = tornado.httpserver.HTTPServer(app)
# 监听端口下的app
server.listen(options.port)
# 启动服务
tornado.ioloop.IOLoop.instance().start()

项目结构

这是一个图片从前端传入到后台的方法,你可以参考,或许有更好的方法也是未尝不错的。如果可以请给作者留言,作者也去学习学习。今天的分享简单结束了。

来源:https://blog.csdn.net/weixin_42812527/article/details/85012441

Tornado--基于H5图片的上传的更多相关文章

  1. Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式

    前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...

  2. H5图片压缩上传

    1.所用到技术 HTML5 API:filereader.canvas 以及 formdata 目前来说,HTML5的各种新API都在移动端的webkit上得到了较好的实现.本次使用到的FileRea ...

  3. Web API之基于H5客户端分段上传大文件

    http://www.cnblogs.com/OneDirection/articles/7285739.html 查询很多资料没有遇到合适的,对于MultipartFormDataStreamPro ...

  4. 基于H5+ API手机相册图片压缩上传

    // 母函数 function App(){} /** * 图片压缩,默认同比例压缩 * @param {Object} path * pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照 ...

  5. 基于vue + axios + lrz.js 微信端图片压缩上传

    业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...

  6. 基于HTML5的可预览多图片Ajax上传

    一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...

  7. 【转载】【JAVA秒会技术之图片上传】基于Nginx及FastDFS,完成图片的上传及展示

    基于Nginx及FastDFS,完成商品图片的上传及展示 一.传统图片存储及展示方式 存在问题: 1)大并发量上传访问图片时,需要对web应用做负载均衡,但是会存在图片共享问题 2)web应用服务器的 ...

  8. 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)

    涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...

  9. base64格式的图片如何上传到oss

    ---恢复内容开始--- 对于base64图片的上传这个东西,一直是一个问题尤其是上传到oss.我们这次开发由于需要修剪图片,使用了h5的很多新特性. h5修剪图片,使用了我们的canvas.这个步骤 ...

随机推荐

  1. MySQL5.5中文支持

    1. /etc/my.cnf.d/client.cnf [client] #password = [your_password] port = 3306 socket = /tmp/mysql.soc ...

  2. 关于CDN对动态网站加速的一些看法

    CDN的全称是Content Delivery Network,即内容分发网络.其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络"边缘" ...

  3. window 效率神器:Wox

    官方网站 http://www.getwox.com/ 下载后以管理员身份运行,右下角可以看到Wox的图标.点击setting可以进入主界面 如果看不懂可以将语言设置为中文 默认快捷键是Alt + s ...

  4. IOS开发——Core Graphics & Core Animation

    好久没写过blog了.首先了解下近期苹果和IOS方面的最新消息. 1.WWDC2014在上个月举行了,与2013年一样.今年WWDC没公布硬件产品和新品(假设你懂cook你就会期待今年秋季公布会.估计 ...

  5. shell中的括号作用

    一.小括号,圆括号() 1.单小括号 ()    ①命令组.括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用.括号中多个命令之间用分号隔开,最后一个命令可以没有 ...

  6. iOS 日志系统 本地日志打包上传到服务器

    日志系统主要包含两个部分 1.本地保存 我们知道NSLog打印的日志一般都是直接输出到控制台,开发人员可以在控制台直接看到实时打印的log,既然可以在控制台输出,那么能否将日志输出到其他地方呢,比如说 ...

  7. idea设置自定义快捷键

    在说明之前,先引入一个非常好的 Intellij Idea中文教程:intelliJ Idea中文教程 一创建模板类 二使用方法备注 在IntellijIdea中我并没有找到直接对某个方法进行注释的模 ...

  8. 机器学习14—SVD学习笔记

    test14.py #-*- coding:utf-8 import sys sys.path.append("svdRec.py") import svdRec from num ...

  9. delphi 无边框窗体常见问题

    实现无边框窗体很简单,直接将窗体的BorderStyle属性设置为bsNone即可.但是这样会引起2个问题: 1.在xp系统下,任务栏鼠标右键点击无法弹出菜单 解决办法:在FormShow中加入这个过 ...

  10. 一个简单的数据增量更新策略(Android / MongoDB / Django)

    我在做个人APP - CayKANJI - 的时候遇到一个问题: 如何增量式地把日语汉字数据地从server更新到APP端,即每次用户运行更新操作时,仅仅获取版本号高于本地缓存的内容. 数据格式 为了 ...