## 一，安裝ImageMagick庫: 1，apt-get安裝 ~~~ root@lhdpc:~# apt-get install imagemagick ~~~ 2,查看版本: [](javascript:void(0); "復制代碼") ~~~ root@lhdpc:~# convert --version Version: ImageMagick 6.9.11-60 Q16 x86_64 2021-01-25 https://imagemagick.org Copyright: (C) 1999-2021 ImageMagick Studio LLC License: https://imagemagick.org/script/license.php Features: Cipher DPC Modules OpenMP(4.5) Delegates (built-in): bzlib djvu fftw fontconfig freetype heic jbig jng jp2 jpeg lcms lqr ltdl lzma openexr pangocairo png tiff webp wmf x xml zlib ~~~ [](javascript:void(0); "復制代碼") 可以看到版本是6.9.11 3,查看命令的路徑: ~~~ root@lhdpc:~# whereis convert convert: /usr/bin/convert /usr/share/man/man1/convert.1.gz ~~~ 說明：劉宏締的架構森林是一個專注架構的博客，地址：[https://www.cnblogs.com/architectforest](https://www.cnblogs.com/architectforest) ? ? ? ? ?對應的源碼可以訪問這里獲取：?[https://github.com/liuhongdi/ ](https://github.com/liuhongdi/)? ? ? ? ?或:?[https://gitee.com/liuhongdi](https://gitee.com/liuhongdi) 說明：作者:劉宏締 郵箱: 371125307@qq.com ## 二，編寫js代碼 Upload.vue [](javascript:void(0); "復制代碼") ~~~ <template> <div> 請選擇上傳幻燈圖片: <input type="file" id="back" ref="backfile" multiple @change="handleFile" /> <div id="imglist" style="width:100%;"> <div v-for="(item,i) in selFiles" :key="i" style="float:left;margin-left: 20px;margin-top: 20px;height:150px;position:relative;"> <img :src="item.fileimg" style="height:150px;"/> <div @click="delqueue(i)" style="position:absolute;width:30px;height:30px;line-height:30px;border-radius:15px;top:-15px;right:-15px;background:#ff0000;">x</div> </div> </div> <input type="button" value="上傳" @click="upload" /> </div> </template> <script> import {ref} from "vue" import { apiUpload} from '@/api/api'; import {ElMessage} from "element-plus"; export default { name: "Upload", setup() { //選中的圖片文件，保存在數組中 const selFiles = ref([]); //選中圖片后的處理 const handleFile = () => { let filePaths = window.event.target.files; //清空原有縮略圖 if (filePaths.length === 0) { //未選擇，則返回 return } else { //清空數組中原有圖片 selFiles.value.length = 0; } //把新選中的圖片加入數組 for( var i=0;i<filePaths.length; i++ ){ let file = filePaths[i]; let one = { fileimg:URL.createObjectURL(file), //預覽用 file:file, } selFiles.value.push(one); } } //從上傳數組中刪除 const delqueue = (index) => { if (confirm("確定從上傳隊列中刪除當前圖片?")) { selFiles.value.splice(index,1); } } //上傳 const upload = () => { //判斷是否選中文件 var file = selFiles.value[0].file; if (typeof(file) === "undefined") { alert("請在上傳前先選中文件!"); return; } // 創建一個表單數據 var data = new FormData(); //遍歷文件，添加到form for( var i=0;i<selFiles.value.length; i++ ){ let fileOne = selFiles.value[i].file; console.log("上傳:"+fileOne.name) data.append("file[]",fileOne); } //上傳 apiUpload(data).then(res => { //成功 if (res.code == 0) { //提示 ElMessage.success("上傳成功!"); } else { ElMessage.error("上傳失敗:"+res.msg); } }).catch((error) => { console.log(error) }) } return { handleFile, selFiles, delqueue, upload, } } } </script> <style scoped> </style> ~~~ [](javascript:void(0); "復制代碼") 三，編寫php代碼: 1,lib/util/imageModify.php [](javascript:void(0); "復制代碼") ~~~ <?php namespace app\lib\util; class imageModify { private $ImageMagickDIR = "/usr/bin"; //按指定長邊生成縮略圖 function resizeImageByLongSide($origImage,$destImage,$size) { $cmdtmb=$this->ImageMagickDIR."/convert -size ".$size."x".$size. " -resize ".$size."x".$size." +profile '*' ".$origImage." ".$destImage." 2>&1"; $rettmb=shell_exec($cmdtmb); return $rettmb; } } ~~~ [](javascript:void(0); "復制代碼") 2,controller/Article.php [](javascript:void(0); "復制代碼") ~~~ /** * 保存上傳的多個文件 * * @return \think\Response */ public function savemulti() { $files = request()->file('file'); if ($files === null) { $files = []; } $savename = []; foreach($files as $file){ $baseDir = GConfig::get('images.goodsImageDir'); $origDir = "orig"; $dir = $baseDir."/".$origDir; if (!is_dir($dir)) { mkdir($dir); } $tmbDir = "tmb"; $tdir = $baseDir."/".$tmbDir; if (!is_dir($tdir)) { mkdir($tdir); } $filename = uniqid(); $destFile = $dir."/".$filename.".".$file->getOriginalExtension(); $destTmb = $tdir."/".$filename.".".$file->getOriginalExtension(); $isUpload = move_uploaded_file($file->getPathname(),$destFile); if ($isUpload) { $savename[] = $origDir."/".$filename.".".$file->getOriginalExtension(); //從保存下來的文件，生成縮略圖 $im = new imageModify(); $im->resizeImageByLongSide($destFile,$destTmb,500); } } return Result::Success($savename); } ~~~ [](javascript:void(0); "復制代碼") ## 四，測試效果 1,訪問: 選擇文件上傳:如圖:  2,上傳后效果:  3,查看tmb文件的長寬:  ## 五，查看php和thinkphp的版本: php: ~~~ liuhongdi@lhdpc:/data/php/admapi$ php --version PHP 8.1.1 (cli) (built: Dec 20 2021 16:12:16) (NTS) Copyright (c) The PHP Group Zend Engine v4.1.1, Copyright (c) Zend Technologies with Zend OPcache v8.1.1, Copyright (c), by Zend Technologies? ~~~ thinkphp: ~~~ liuhongdi@lhdpc:/var/www/html$ cd /data/php/admapi/ liuhongdi@lhdpc:/data/php/admapi$ php think version v6.0.10LTS ~~~