## 一，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); } }  ~~~ ## 三，测试效果: 上传  查看返回结果:  查看服务端上传的文件: