## 一，vue代碼: Upload.vue ~~~ <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> ~~~ ## 二，服務端php代碼 1,配置.env,添加: ~~~ [GOODSIMAGE] GOODS_IMAGE_DIR=/var/www/html/goodsimage GOODS_IMAGE_HOST=http://192.168.219.6/goodsimage ~~~ 2,config/images.php ~~~ <?php return [ "goodsImageDir"=>env('goodsimage.goods_image_dir' ), "goodsImageHost"=>env('goodsimage.goods_image_host'), ]; ~~~ 3,controller/Article.php ~~~ class Article extends BaseController { /** * 保存上傳的多個文件 * * @return \think\Response */ public function savemulti() { $files = request()->file('file'); if ($files === null) { $files = []; } $savename = []; foreach($files as $file){ $basedir = GConfig::get('images.goodsImageDir'); $subdir = "2000"; $dir = $basedir."/".$subdir; if (!is_dir($dir)) { mkdir($dir); } $filename = uniqid(); $destFile = $dir."/".$filename.".".$file->getOriginalExtension(); $isUpload = move_uploaded_file($file->getPathname(),$destFile); if ($isUpload) { $savename[] = $subdir."/".$filename.".".$file->getOriginalExtension(); } } return Result::Success($savename); } }? ~~~ ## 三，測試效果: 上傳  查看返回結果:  查看服務端上傳的文件: