数据库
首页 > 数据库> > 【计算机网络基础——系列14】python将本地文件夹下图片批量转换为二进制存到数据库中,取出图片放到前端页面展示

【计算机网络基础——系列14】python将本地文件夹下图片批量转换为二进制存到数据库中,取出图片放到前端页面展示

作者:互联网

系列文章目录

【计算机网络基础——系列1】-matlab与python使用socket udp进行进程间通信
【计算机网络基础——系列2】-matlab与python使用socket tcp进行进程间通信
【计算机网络基础——系列3】输入url后页面会遇到的问题
【计算机网络基础——系列4】关于HTTP请求的相关内容
【计算机网络基础——系列5】前端遇到的三种网络攻击
【计算机网络基础——系列6】浏览器缓存之cookie、session、localstorage
【计算机网络基础——系列7】浏览器缓存之—http缓存
【计算机网络基础——系列8】前端优化总结
【计算机网络基础——系列9】restful规范;dns劫持
【计算机网络基础——系列10】osi网络结构;tcp协议保持传输的可靠性;SSL
【计算机网络基础——系列11】实现python作为服务端与qt进行udp通信
【计算机网络基础——系列12】flask作为服务器与vue实现websocket通信
【计算机网络基础——系列13】python操作数据库储存图片,取出图片放到前端页面展示
【计算机网络基础——系列14】python将本地文件夹下图片批量转换为二进制存到数据库中,取出图片放到前端页面展示


文章目录


前言

因为要求存储大量图片,所以得对文件夹中得图片进行批量操作,这也是对13的补充


提示:以下是本篇文章正文内容,下面案例可供参考

一、python中对本地文件夹中图片批量操作

path = "C:\\Users\\yangyaning\\Desktop\\pic\\infor\\wenyang\\num"  # 文件夹目录
files = os.listdir(path)  # 得到文件夹下的所有文件名称
s = []
ss = []
for file in files:  # 遍历文件夹
     if not os.path.isdir(file):  # 判断是否是文件夹,不是文件夹才打开
         fin = open(path + "\\" + file, 'rb')
         img = fin.read()
         # print('picture', img_stream)
         s.append(img)  # 每个文件的文本存到list中
# print(s)  # 打印结果

@app.route('/login', methods=['POST'])  # 图片传输
def login():
    database = Database()
    # database.create_slx("picture")
    ii = 0
    global s
    global ss
    for i in s:
       ii = ii + 1
       database.insert_image(ii, 629, i)
    for idd in range(83):
        d1 = base64.b64encode(database.get_image("id =\"" + str(idd+1) + "\""))
        print('id',d1)
        d11 = d1.decode()
        ss.append(d11)

    req = request.get_json()
    print(req)
    # print('send',ss)
    return jsonify({2: ss})  # 返回JSON格式的数据

二、前端对批量图片进行展示

效果展示:
在这里插入图片描述

2.1 按钮点击后显示加载然后按钮消失

var button=document.getElementById('button');
   button.style.display="none";

          const loading = await this.loadingController.create({
            cssClass: 'my-custom-class',
            message: '请耐心等待加载,不要关闭app',
            duration: 37000
          });
          await loading.present();

          const { role, data } = await loading.onDidDismiss();
          console.log('Loading dismissed!');

2.2 通过ajax连接到后台,并且批量生成dom字节批量展示图片。

 $.ajax({
         type: "POST",
         url: "http://localhost:5000/login",
         contentType: 'application/json; charset=UTF-8',
         data: JSON.stringify(dict) ,
         dataType: "json",
         success: function(res) {
            for(var i=0;i<=26;i++){
              //////////////////////////////////////////////////////////////////////////////////////////////////第一个///////////////////////////
            var div=  document.createElement('div'); 
            div.style.display="flex";
            var ion_card_1 = document.createElement('ion-card'); 
            ion_card_1.style.height="250px";
            ion_card_1.style.width="30%";
            var ion_card_header_1=document.createElement('ion-card-header');
            ion_card_header_1.style.backgroundColor="aliceblue";
            var ion_card_subtitle_1 = document.createElement('ion-card-subtitle');
            var img_1 = document.createElement('img');
            img_1.style.width="60%";
            img_1.style.margin="0 auto";
    
            var ion_card_title_1 = document.createElement('ion-card-title');
            ion_card_title_1.style.backgroundColor="aliceblue";
            var ion_card_content_1 = document.createElement('ion-card-content');
            ion_card_content_1.style.backgroundColor="aliceblue";
            ion_card_content_1.style.top="-6%"
    
            img_1.src = 'data:image/png;base64,' + res[2][3*i];
            img_1.alt = "";
    
            ion_card_title_1.innerHTML="青神竹编产品"+(3*(i+1))
    
            ion_card_content_1.innerHTML="青神竹编采用保护区内的竹原料,筒长节稀、质地柔韧。以特色人文景观、书法作品、名人画像为编织重点,在特定的环境中纯手工编织。锁口、收尾不用任何粘结物,原料均100%采用天然竹材"
    
            ion_card_subtitle_1.appendChild(img_1);
            ion_card_header_1.appendChild(ion_card_subtitle_1);
            ion_card_header_1.appendChild(ion_card_title_1);
            ion_card_1.appendChild(ion_card_header_1);
            ion_card_1.appendChild(ion_card_content_1);
            div.appendChild(ion_card_1);
            allpicture.appendChild(div);
    
    

2.3 源码

async continue(){
   var button=document.getElementById('button');
   button.style.display="none";

          const loading = await this.loadingController.create({
            cssClass: 'my-custom-class',
            message: '请耐心等待加载,不要关闭app',
            duration: 37000
          });
          await loading.present();

          const { role, data } = await loading.onDidDismiss();
          console.log('Loading dismissed!');

        var allpicture = document.getElementById('allpictrues');
        var dict=1;
        var dat;
       $.ajax({
         type: "POST",
         url: "http://localhost:5000/login",
         contentType: 'application/json; charset=UTF-8',
         data: JSON.stringify(dict) ,
         dataType: "json",
         success: function(res) {
            for(var i=0;i<=26;i++){
              //////////////////////////////////////////////////////////////////////////////////////////////////第一个///////////////////////////
            var div=  document.createElement('div'); 
            div.style.display="flex";
            var ion_card_1 = document.createElement('ion-card'); 
            ion_card_1.style.height="250px";
            ion_card_1.style.width="30%";
            var ion_card_header_1=document.createElement('ion-card-header');
            ion_card_header_1.style.backgroundColor="aliceblue";
            var ion_card_subtitle_1 = document.createElement('ion-card-subtitle');
            var img_1 = document.createElement('img');
            img_1.style.width="60%";
            img_1.style.margin="0 auto";
    
            var ion_card_title_1 = document.createElement('ion-card-title');
            ion_card_title_1.style.backgroundColor="aliceblue";
            var ion_card_content_1 = document.createElement('ion-card-content');
            ion_card_content_1.style.backgroundColor="aliceblue";
            ion_card_content_1.style.top="-6%"
    
            img_1.src = 'data:image/png;base64,' + res[2][3*i];
            img_1.alt = "";
    
            ion_card_title_1.innerHTML="青神竹编产品"+(3*(i+1))
    
            ion_card_content_1.innerHTML="青神竹编采用保护区内的竹原料,筒长节稀、质地柔韧。以特色人文景观、书法作品、名人画像为编织重点,在特定的环境中纯手工编织。锁口、收尾不用任何粘结物,原料均100%采用天然竹材"
    
            ion_card_subtitle_1.appendChild(img_1);
            ion_card_header_1.appendChild(ion_card_subtitle_1);
            ion_card_header_1.appendChild(ion_card_title_1);
            ion_card_1.appendChild(ion_card_header_1);
            ion_card_1.appendChild(ion_card_content_1);
            div.appendChild(ion_card_1);
            allpicture.appendChild(div);
    
    
    //////////////////////////////////////////////////////////////////////////////////////////////////第二个///////////////////////////
    
    var ion_card_2 = document.createElement('ion-card'); 
            ion_card_2.style.height="250px";
            ion_card_2.style.width="30%";
            var ion_card_header_2=document.createElement('ion-card-header');
            ion_card_header_2.style.backgroundColor="aliceblue";
            var ion_card_subtitle_2 = document.createElement('ion-card-subtitle');
            var img_2 = document.createElement('img');
            img_2.style.width="60%";
            img_2.style.margin="0 auto";
    
            var ion_card_title_2 = document.createElement('ion-card-title');
            ion_card_title_2.style.backgroundColor="aliceblue";
            var ion_card_content_2 = document.createElement('ion-card-content');
            ion_card_content_2.style.backgroundColor="aliceblue";
            ion_card_content_2.style.top="-6%"
            
            img_2.src = 'data:image/png;base64,' + res[2][3*i+1];
            img_2.alt = "";
    
            ion_card_title_2.innerHTML="青神竹编产品"+(3*(i+1)+1)
    
            ion_card_content_2.innerHTML="青神竹编采用保护区内的竹原料,筒长节稀、质地柔韧。以特色人文景观、书法作品、名人画像为编织重点,在特定的环境中纯手工编织。锁口、收尾不用任何粘结物,原料均100%采用天然竹材"
    
            ion_card_subtitle_2.appendChild(img_2);
            ion_card_header_2.appendChild(ion_card_subtitle_2);
            ion_card_header_2.appendChild(ion_card_title_2);
            ion_card_2.appendChild(ion_card_header_2);
            ion_card_2.appendChild(ion_card_content_2);
            div.appendChild(ion_card_2);
            allpicture.appendChild(div);
    
    
    
    
    
            //////////////////////////////////////////////////////////////////////////////////////////////////第三个///////////////////////////
    
    var ion_card_3 = document.createElement('ion-card'); 
    ion_card_3.style.height="250px";
    ion_card_3.style.width="30%";
    var ion_card_header_3=document.createElement('ion-card-header');
    ion_card_header_3.style.backgroundColor="aliceblue";
    var ion_card_subtitle_3 = document.createElement('ion-card-subtitle');
    var img_3 = document.createElement('img');
    img_3.style.width="60%";
    img_3.style.margin="0 auto";
    
    var ion_card_title_3 = document.createElement('ion-card-title');
    ion_card_title_3.style.backgroundColor="aliceblue";
    var ion_card_content_3 = document.createElement('ion-card-content');
    ion_card_content_3.style.backgroundColor="aliceblue";
    ion_card_content_3.style.top="-6%"
    
    img_3.src = 'data:image/png;base64,' + res[2][3*i+2];
    img_3.alt = "";
    
    ion_card_title_3.innerHTML="青神竹编产品"+(3*(i+1)+2)
    
    ion_card_content_3.innerHTML="青神竹编采用保护区内的竹原料,筒长节稀、质地柔韧。以特色人文景观、书法作品、名人画像为编织重点,在特定的环境中纯手工编织。锁口、收尾不用任何粘结物,原料均100%采用天然竹材"
    
    ion_card_subtitle_3.appendChild(img_3);
    ion_card_header_3.appendChild(ion_card_subtitle_3);
    ion_card_header_3.appendChild(ion_card_title_3);
    ion_card_3.appendChild(ion_card_header_3);
    ion_card_3.appendChild(ion_card_content_3);
    div.appendChild(ion_card_3);
    allpicture.appendChild(div);
    }

            
         },
         error: function(xhr, type) {
         }
       });
        
      }

三、出现的各类问题

3.1 Cannot read property ‘appendChild’ of null

这种情况一般是获取的节点不存在导致,仔细查找是否遗漏节点。

3.2 ionic中使用jquery

  1. cnpm install jquery --save
  2. cnpm install @types/jquery --save
  3. 在ts文件中import * as $ from ‘jquery’;

3.3 ‘gbk’ codec can’t decode byte 0xff in position 0: illegal multibyte sequence

3.4 local variable ‘a’ referenced before assignment

未声明全局变量
声明一下就好了

global a

3.5 python的遍历的四种方法

遍历四种方法

3.6 python用base64库进行图片与字符串的转换

各种格式的转换


码字不易~, 各位看官要是看爽了,可不可以三连走一波,点赞皆有好运!,不点赞也有哈哈哈~~~

标签:style,14,img,python,ion,var,document,card,图片
来源: https://blog.csdn.net/yangyaning123/article/details/118356048