zoukankan      html  css  js  c++  java
  • Tornado--基于H5图片的上传

    日记

    好久没有分享过东西,一直在学习状态,学的并不好很多东西都没有,也写了很多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=" 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

  • 相关阅读:
    2021.11.20 MapReduce实验
    Linux串口应用编程
    Linux系统中的TTY
    69 进程创建的优化设计 上
    71 键盘驱动程序设计(上)
    有关EXPORT_SYMBOL_GPL
    73 键盘驱动程序设计(下)
    72 键盘驱动程序设计(中)
    本地maven打包无法被导入
    java 8 Stream 递归实现树形结构
  • 原文地址:https://www.cnblogs.com/qixidi/p/10190190.html
Copyright © 2011-2022 走看看