• 飞桨模型部署至docker并使用FastAPI调用（五）-WordPress展示页面

  ---

  文章首发及后续更新：https://mwhls.top/4092.html，无图/无目录/格式错误/更多相关请至首发页查看。
  新的更新内容请到mwhls.top查看。
  欢迎提出任何疑问及批评，非常感谢！

  飞桨模型部署至docker并使用FastAPI调用

  目录

  框架搭建

  测试 – 图片展示栏

  测试 – 图片上传与自动删除

  测试 – 上传与处理

  附录

  参考文献

  文中代码

  测试 – 图片展示栏

  测试 – 图片上传与自动删除

  测试 – 上传与处理

  框架搭建

  • 继续上一节，配置完环境，测试完代码后，开始搭建框架。
  • 本部分的代码的实际效果见：PHP 短代码测试。

  测试 – 图片展示栏

  • 考虑到 WordPress 会自动适应界面大小，我对 html 也不熟，所以用 WordPress 创建三个栏目，参考一下它的 html。

    • 报错，下一个。

  • 参考了一些教程，自己写了个，代码见 附录-文中代码 中对应标题。

  • 效果如下，始终三栏，图片自适应窗口大小，但字体大小无自适应：
    

  • 但后面在改变视窗尺寸的测试中发现，当视窗比较大的时候，右边会出现空缺，而空缺会被下一行的东西补上，很丑，不过不碍事，加点占位符就解决了。

  测试 – 图片上传与自动删除

  • 明确功能：

    • 上传两张图片以进行推理。
    • 这要求代码能够哪些图片是一组，除非不考虑并发。
    • 不过我也没做过这方面的，所以我简单的在短代码里面用时间戳来区分同一组图片。
    • 自动删除。
    • 因为区分一组图片时，我是用时间戳来区分，所以自动删除也可以用时间戳来区分。

  • 输出：

    • 1655796204_before.png
      delete 1655796204_before.png
      1655822379_after.png
      1655822379_before.png
      save as./upload/1655822379_before.png ./upload/1655822379_after.png
      1
      2
      3
      4

  • 思考：

    • 做完之后感觉不用区分，因为一次提交两张图片，可以直接转 base64 传给服务器，没有区分的必要啊。
    • 现在是新的问题了，会跳转到 upload.php 里面去，不能在线刷新。

  测试 – 上传与处理

  • 这部分写的脑袋疼，路径太奇怪了，同一个文件居然有两类路径。

    • 虽然代码重写了挺多遍，但最后效果比想象的好。
    • 但这部分的短代码会让编辑页面打不开，不过只要在插件里面暂停掉该短代码就正常了，虽然是bug，但几乎不影响。

  • 实现思路：

    • 原始页面嵌入 iframe。
    • 原始页面上传图片，并 post 到 iframe。
    • iframe 接受图片并处理，展示。

  • 实现效果：

    1. 上传两张图片。
       1. 可同时上传两张。
       2. 可分开上传，并分别展示。
       3. 可覆盖上传。
    2. 直接以base64形式展示，不保存为临时文件。
    3. 展示图片时不刷新，且自适应大小。

  • 结果展示

    原始页面	仅上传一张图片

  附录

  参考文献

  1. PHP 菜鸟教程
  2. SM.MS 图床
  3. HTML 中引入 CSS 的方式
  4. css布局篇——双栏布局与三栏布局
  5. iframe
  6. PHP chdir函数：改变当前的目录
  7. [iframe高度自适应的6个方法] – 这篇NB，是我这些参考里面最有用的。

  文中代码

  测试 – 图片展示栏

  
      
  
  
      
  
          
  
              
              
   
   第一时图像 
   
              
   
   上传 
   
          
          
  
              
              
   
   第二时图像 
   
              
   
   上传 
   
          
          
  
              
              
   
   变化区域推理 
   
              
   
   下载 
   
          
      
  
  ";
  ?>
  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

  测试 – 图片上传与自动删除

  • 短代码

  
          文件名：
          
          
  
          
  
          
      
      ";
  ?>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

  • 目录树

  - pdrs
  --- upload.php
  --- utils.php
  --- upload
    --- 1655820968_before.png
    --- 1655809752_before.png
    --- 1655796204_before.png
    --- 1655822379_before.png
    --- 1655822379_after.png
  1
  2
  3
  4
  5
  6
  7
  8

  • upload.php

  • 1
  • 2
  • 3

  $upload_path = ‘./upload/’;
  $fil{e}_{s}iz{e}_{m}ax=1024\ast 1024\ast 10;//10Mchec{k}_{o}l{d}_{f}il{e}_i{n}_{d}ir($upload_path);

  if ($_SERVER[“REQUEST_METHOD”] == “POST”)
  {
  // $workplace = ‘/home/ftp/y/yupfyfel/wwwroot/external-functions/pdrs/’;
  $tmp_file_path_before = $upload_path . $_POST[“timestamp”] . “_before.png”;
  $tmp_file_path_after = $upload_path . ${}_{P}OST["timestamp"].{"}_{a}fter.png";mov{e}_{u}ploade{d}_{f}ile($_FILES[“file1”][“tmp_name”], $tm{p}_{f}il{e}_{p}at{h}_{b}efore);mov{e}_{u}ploade{d}_{f}ile($_FILES[“file2”][“tmp_name”], $tmp_file_path_after);
  echo “save as” . $tmp_file_path_before . " " . $tmp_file_path_after;
  }
  ?>

  • utils.php

  • 1

  function delete_old_file($file_path) {
  # file_path: timestamp_filename.png
  # if timestamp is ten minutes ago, delete the file
  $fil{e}_{n}ame=substr($file_path, strrpos($file_path, ‘/’) + 1);
  $timestamp=substr($file_name, 0, strrpos($file_name, ‘_’));
  $timestamp_now = time();
  $timestamp_ago = $timestam{p}_{n}ow-600;if($timestamp < KaTeX parse error: Expected '}', got 'EOF' at end of input: … unlink(file_path);
  return true;
  }
  return false;
  }

  function check_old_file_in_dir($dir) {
  # dir: ./upload/
  $files=scandir($dir);
  foreach ($files as KaTeX parse error: Expected '}', got 'EOF' at end of input: … { if (file != ‘.’ && $file != ‘…’) {
  echo KaTeX parse error: Expected 'EOF', got '&' at position 9: file . '&̲lt;br>'; …dir . $file)) {
  echo 'delete ’ . $file . ‘
  ’;
  }
  }
  }
  }

  ?>

  测试 – 上传与处理

  • 短代码

• 1
• 2
• 3
• 4
• 5

$timestamp = time();
$file_name_before = $timestamp . ‘_before.png’;
$file_name_after = $timestamp . ‘_after.png’;

$html = ’

第一时影像：

';
echo $html;

?>

• 目录树

- pdrs
--- upload.php
--- utils.php
1
2

• upload.php

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

if ($_SERVER[“REQUEST_METHOD”] == “POST”){
$file_before = $_FILES[“file_before”];
$file_after = $_FILES[“file_after”];

if (check_file($file_before)){
    # save img
    // $file_path_before = $upload_path . $_POST['file_name_before'];
    // move_uploaded_file($file_before["tmp_name"], $file_path_before);
    # img to base64
    $img_before = img_to_base64($file_before["tmp_name"]);
} 

if (check_file($file_after)){
    # save img
    // $file_path_after = $upload_path . $_POST['file_name_after'];
    // move_uploaded_file($file_after["tmp_name"], $file_path_after);
    # img to base64
    $img_after = img_to_base64($file_after["tmp_name"]);
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

}

$html = ’

';
echo $html;
?>

• utils.php

• 1

global variables

$file_size_max = 1024 * 1024 * 2; // 2M

function print_file_in_dir($dir) {
# dir: ./upload/
$files=scandir($dir);
foreach ($files as KaTeX parse error: Expected '}', got 'EOF' at end of input: … { if (file != ‘.’ && $file != ‘…’) {
echo(“file:” . $dir . ‘/’ . $file . “
”);
}
}
}

function delete_old_file($file_path) {
# file_path: timestamp_filename.png
# if timestamp is ten minutes ago, delete the file
$fil{e}_{n}ame=substr($file_path, strrpos($file_path, ‘/’) + 1);
$timestamp=substr($file_name, 0, strrpos($file_name, ‘_’));
$timestamp_now = time();
$timestamp_ago = $timestam{p}_{n}ow-600;if($timestamp < KaTeX parse error: Expected '}', got 'EOF' at end of input: … unlink(file_path);
return true;
}
return false;
}

function check_old_file_in_dir($dir) {
# dir: ./upload/
$files=scandir($dir);
foreach ($files as KaTeX parse error: Expected '}', got 'EOF' at end of input: … { if (file != ‘.’ && KaTeX parse error: Expected '}', got 'EOF' at end of input: …elete_old_file(dir . $file);
}
}
}

function test_input($data){
# copy from: https://www.runoob.com/php/php-form-validation.html
$data=trim($data);
$data=stripslashes($data);
$data=htmlspecialchars($data);
return $data;
}

function check_file($_file) {
# check file type, size. Allow type: png, jpg, jpeg
# $_file: $_FILES[“file”]
$file_type = $_file[“type”];
$file_size = ${}_{f}ile["size"];if($file_type != “image/png” && $file_type != “image/jpg” && $file_type != “image/jpeg” || $file_size > $GLOBALS[‘file_size_max’]) {
echo "文件类型或大小不符合要求: " . $file_type . " " . $file_size;
return false;
}
return true;
}

function img_to_base64(KaTeX parse error: Expected '}', got '#' at position 18: …le_path) { #̲ file_path: ./u…fp = fopen($file_path, “r”)) {
$content=fread($fp, filesize($fil{e}_{p}ath));fclose($fp);
$fil{e}_{b}ase64{=}^{\prime }data:image/png;base64{,}^{\prime }.base64_{e}ncode($content);

    return $file_base64;
}
return false;
1
2
3

}