系列文章目录

【计算机网络基础——系列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将本地文件夹下图片批量转换为二进制存到数据库中，取出图片放到前端页面展示

---

文章目录

• 系列文章目录
• 前言
• 一、python中对本地文件夹中图片批量操作
• 二、前端对批量图片进行展示
• • 2.1 按钮点击后显示加载然后按钮消失
  • 2.2 通过ajax连接到后台，并且批量生成dom字节批量展示图片。
  • 2.3 源码
• 三、出现的各类问题
• • 3.1 Cannot read property 'appendChild' of null
  • 3.2 ionic中使用jquery
  • 3.3 'gbk' codec can't decode byte 0xff in position 0: illegal multibyte sequence
  • 3.4 local variable 'a' referenced before assignment
  • 3.5 python的遍历的四种方法
  • 3.6 python用base64库进行图片与字符串的转换

---

前言

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

---

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

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

• 对文件夹进行遍历，将遍历下来得图片文件通过‘rb’转换为二进制格式，推入s中。

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)  # 打印结果

• 对前面存储了二进制图片格式的s数组进行遍历，并且将遍历得到的每个图像进行数据库的插入。
• 因为传入的图片有83个，所以直接对83进行遍历，然后对数据库中的二进制图片数据进行每一个每一个的取出并进行转换为base64格式，然后存入d1中
• 然后对base64格式进行解码，然后放入d11中。
• 再将解码后的数据推入ss数组中。

@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 按钮点击后显示加载然后按钮消失

• await loading.present（）是按钮点击后显示正在加载状态。
• button.style.display="none"是按钮点击后显按钮消失。
  可供参考

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字节批量展示图片。

• for(var i=0;i<=26;i++)是将循环创造dom元素，每次创建三个dom元素，也就是接收三个图片并且显示。
• var div= document.createElement('div'); div.style.display="flex"; 创建dom元素，并且命名然后给予其属性。
• img_1.src = 'data:image/png;base64,' + res[2][3*i];是将base64格式的图片进行展示。

 $.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

• 编码解码错误，要将转换的图片旁边加上‘rb’

3.4 local variable ‘a’ referenced before assignment

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

global a

3.5 python的遍历的四种方法

遍历四种方法

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

各种格式的转换

---

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