日记

好久没有分享过东西，一直在学习状态，学的并不好很多东西都没有，也写了很多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. go结构体组合函数

    结构体定义 上面我们说过Go的指针和C的不同,结构体也是一样的.Go是一门删繁就简的语言,一切令人困惑的特性都必须去掉. 简单来讲,Go提供的结构体就是把使用各种数据类型定义的不同变量组合起来的高级数 ...

  2. Atitit.程序包装exe启动器 打包 发布 设计 -生成exe java

    Atitit.程序包装exe启动器 打包 发布 设计 -生成exe java 1. 要实现的功能1 2. ahk是个好东东..能启动了...1 3. exe4j   vs  nativej1 4. 2 ...

  3. [译]NeHe教程 - 创建一个OpenGL窗体

    原文: Setting Up An OpenGL Window 欢迎阅读我的OpenGL教程.我是一个热爱OpenGL的普通码农!我第一次听到OpenGL是在3Dfx刚发布他们给Voodoo I显卡的 ...

  4. 过年啦！小B高兴的不行了，她收到了很多红包，可以实现好多的愿望呢。小B可是对商店货架上心仪的货物红眼好久了，只因囊中羞涩作罢，这次她可是要大大的shopping一番。小B想去购物时，总是习惯性的把要买的东西列在一个购买清单上，每个物品单独列一行（即便要买多个某种物品），这次也不例外。

    include "stdafx.h" #include<iostream> #include<vector> #include <algorithm& ...

  5. CIA 读书笔记

    对此书的评价只有八个字:粗制滥造,到处粘贴. 对于通过表情识别人情绪的教程,最好要有图,图很重要,也最好有案例.

  6. 【elasticsearch】安装合集

    [elasticsearch](1)centos7 使用yum安装elasticsearch 2.X [elasticsearch](2)centos7 超简单安装elasticsearch 的监控. ...

  7. android 各版本的区别

    三.Android 6.x 新增运行时权限概念 Android6.0或以上版本,用户可以完全控制应用权限.当用户安装一个app时,系统默认给app授权部分基础权限,其他敏感权限,需要开发者自己注意,当 ...

  8. MyEclipse中Save could not be completed

    在MyEclipse下编程时,保存的时候,假设出现例如以下图所看到的错误: - 刘立 - 707903908的博客" src="http://img0.ph.126.net/9y4 ...

  9. volley全然解析

    一.volley是什么? 1.简单介绍   Volley是Goole在2013年Google I/O大会上推出了一个新的网络通信框架,它是开源的.从名字由来和配图中无数急促的火箭能够看出 Volley ...

  10. Laravel 手记（连接mysql）

    这几天学习Laravel框架遇到了数据库方面的问题. PDOException in Connector.php line 55:SQLSTATE[HY000] [1045] Access denie ...