Cpp五条

这个屌丝很懒，什么也没留下！

热门标签

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

作者：Cpp五条 | 2024-02-21 17:08:23

踩

python 保存二进制文件数据库

系列文章目录

文章目录

系列文章目录
前言
一、python中对本地文件夹中图片批量操作
二、前端对批量图片进行展示
三、出现的各类问题

前言

因为要求存储大量图片，所以得对文件夹中得图片进行批量操作，这也是对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)  # 打印结果

1
2
3
4
5
6
7
8
9
10
11
12

对前面存储了二进制图片格式的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格式的数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

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

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!');

1
2
3
4
5
6
7
8
9
10
11
12
13

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);
    
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

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) {
         }
       });
        
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

三、出现的各类问题

3.1 Cannot read property ‘appendChild’ of null

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

3.2 ionic中使用jquery

cnpm install jquery --save
cnpm install @types/jquery --save
在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
1

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/125259

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