在日常开发中，有时会遇到需要批量下载多个用户的文件（如身份证正反面照片）的需求。为了提升用户体验，减少人工操作，我们可以通过前端和后端的配合来实现这一功能。本文将详细介绍如何通过 thinkPHP6 + Element ui 实现批量下载图片的功能。刚好最近客户想要实现批量下载多个用户的身份证正反面照片，于是网上找了资料整理了下。
前端
1.写个下载按钮
js
<el-button class="filter-item" type="success" icon="el-icon-set-up" @click="downIdcard" size="small">下载身份证件</el-button>2.下载事件函数
js
if (this.selectedCodes.length == 0) {
this.$message.error("至少选择一条数据");
return
}
this.$http.get('downloadIdcardImgs', { params: { code: this.selectedCodes }, responseType: 'blob' }).then(res => {
console.log(res);
// 创建一个URL对象
const url = window.URL.createObjectURL(new Blob([res.data]));
// 创建一个隐藏的a标签并模拟点击
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', this.selectedCodes[0]+'-'+this.selectedCodes[this.selectedCodes.length-1]+ '.zip'); // 文件名自定义
document.body.appendChild(link);
link.click();
// 清理
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
})后端
1.定义好路由，保证前端能正常访问到后端接口
2.extend扩展类库目录中新建zipfile目录，里面新建zipfile.php文件，文件代码如下：
php
<?php
declare(strict_types=1);
namespace zipfile;
class zipfile {
var $datasec = array ();
var $ctrl_dir = array ();
var $eof_ctrl_dir = "\x50\x4b\x05\x06\x00\x00\x00\x00";
var $old_offset = 0;
function unix2_dostime($unixtime = 0){
$timearray = ($unixtime == 0) ? getdate () : getdate($unixtime);
if ($timearray ['year'] < 1980){
$timearray ['year'] = 1980;
$timearray ['mon'] = 1;
$timearray ['mday'] = 1;
$timearray ['hours'] = 0;
$timearray ['minutes'] = 0;
$timearray ['seconds'] = 0;
}
return (($timearray ['year'] - 1980) << 25) | ($timearray ['mon'] << 21) | ($timearray ['mday'] << 16) | ($timearray ['hours'] << 11) | ($timearray ['minutes'] << 5) | ($timearray ['seconds'] >> 1);
}
function add_file($data, $name, $time = 0){
$name = str_replace('\\', '/', $name);
$dtime = dechex($this->unix2_dostime($time));
$hexdtime = '\x' . $dtime [6] . $dtime [7] . '\x' . $dtime [4] . $dtime [5] . '\x' . $dtime [2] . $dtime [3] . '\x' . $dtime [0] . $dtime [1];
eval('$hexdtime = "' . $hexdtime . '";');
$fr = "\x50\x4b\x03\x04";
$fr .= "\x14\x00";
$fr .= "\x00\x00";
$fr .= "\x08\x00";
$fr .= $hexdtime;
$unc_len = strlen($data);
$crc = crc32($data);
$zdata = gzcompress($data);
$zdata = substr(substr($zdata, 0, strlen($zdata)- 4), 2);
$c_len = strlen($zdata);
$fr .= pack('V', $crc);
$fr .= pack('V', $c_len);
$fr .= pack('V', $unc_len);
$fr .= pack('v', strlen($name));
$fr .= pack('v', 0);
$fr .= $name;
$fr .= $zdata;
$fr .= pack('V', $crc);
$fr .= pack('V', $c_len);
$fr .= pack('V', $unc_len);
$this->datasec [] = $fr;
$cdrec = "\x50\x4b\x01\x02";
$cdrec .= "\x00\x00";
$cdrec .= "\x14\x00";
$cdrec .= "\x00\x00";
$cdrec .= "\x08\x00";
$cdrec .= $hexdtime;
$cdrec .= pack('V', $crc);
$cdrec .= pack('V', $c_len);
$cdrec .= pack('V', $unc_len);
$cdrec .= pack('v', strlen($name));
$cdrec .= pack('v', 0);
$cdrec .= pack('v', 0);
$cdrec .= pack('v', 0);
$cdrec .= pack('v', 0);
$cdrec .= pack('V', 32);
$cdrec .= pack('V', $this->old_offset);
$this->old_offset += strlen($fr);
$cdrec .= $name;
$this->ctrl_dir[] = $cdrec;
}
function add_path($path, $l = 0){
$d = @opendir($path);
$l = $l > 0 ? $l : strlen($path) + 1;
while($v = @readdir($d)){
if($v == '.' || $v == '..'){
continue;
}
$v = $path . '/' . $v;
if(is_dir($v)){
$this->add_path($v, $l);
} else {
$this->add_file(file_get_contents($v), substr($v, $l));
}
}
}
function file(){
$data = implode('', $this->datasec);
$ctrldir = implode('', $this->ctrl_dir);
return $data . $ctrldir . $this->eof_ctrl_dir . pack('v', sizeof($this->ctrl_dir)) . pack('v', sizeof($this->ctrl_dir)) . pack('V', strlen($ctrldir)) . pack('V', strlen($data)) . "\x00\x00";
}
function add_files($files){
foreach($files as $file){
if (is_file($file)){
$data = implode("", file($file));
$this->add_file($data, $file);
}
}
}
function output($file){
$fp = fopen($file, "w");
fwrite($fp, $this->file ());
fclose($fp);
}
}3.编写路由中定义的函数，实现图片压缩文件下载
php
public function downloadIdcardImgs()
{
$dfile = tempnam('/tmp', 'tmp'); //产生一个临时文件，用于缓存下载文件
$zip = new zipfile();
//----------------------
$filename = 'image.zip'; //下载的默认文件名
//以下是需要下载的图片数组信息，将需要下载的图片信息转化为类似即可
// 需要下载的图片数组信息
$image = array(
array('image_src' => 'https://xxx.com/images/20250206/2025020611551410003.jpg', 'image_name' => '1.jpg'),
array('image_src' => 'https://xxx.com/images/20250206/2025020611550849112.jpg', 'image_name' => '2.jpg'),
);
foreach ($image as $v) {
$zip->add_file(file_get_contents($v['image_src']), $v['image_name']);
// 添加打包的图片，第一个参数是图片内容，第二个参数是压缩包里面的显示的名称, 可包含路径
// 或是想打包整个目录 用 $zip->add_path($image_path);
}
//----------------------
$zip->output($dfile);
// 下载文件
ob_clean();
header('Access-Control-Allow-Origin: *'); // 允许所有来源的跨域请求
header('Access-Control-Allow-Methods: POST, GET, OPTIONS'); // 允许的方法
header('Access-Control-Allow-Headers: Content-Type, Authorization'); // 允许的请求头
header('Pragma: public');
header('Last-Modified:' . gmdate('D, d M Y H:i:s') . 'GMT');
header('Cache-Control:no-store, no-cache, must-revalidate');
header('Cache-Control:pre-check=0, post-check=0, max-age=0');
header('Content-Transfer-Encoding:binary');
header('Content-Encoding:none');
header('Content-type: application/zip');
header('Content-Description: File Transfer');
// header('Content-Encoding: gzip');
header('Content-Disposition:attachment; filename="' . $filename . '"'); //设置下载的默认文件名
// header('Content-length:' . filesize($dfile));
header('transfer-encoding: chunked');
$fp = fopen($dfile, 'r');
while (connection_status() == 0 && $buf = @fread($fp, 8192)) {
echo $buf;
}
fclose($fp);
@unlink($dfile);
@flush();
@ob_flush();
exit();
}4.这样点击下载按钮，就可以下载一个压缩文件，解压后就是所需要的图片了。
总结
通过上面的实现方案，我们能成功实现批量下载用户所需图片的功能。前端通过简单的按钮点击即可触发下载操作，后端则负责图片的获取、打包和返回。整个过程高效且易于维护，适用于多种类似的批量文件下载场景。