一，相关文档
https://learnku.com/docs/laravel/10.x/filesystem/14865#481e03二，前端vue代码
|
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
<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 axios from 'axios';export default { name: "MultiUploadImg", 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; data.append("img[]",fileOne); } let url = "/api/news/multiimgadd"; //axios上传文件 axios({ method:"post", url:url, data:data, headers:{'Content-Type': 'multipart/form-data'}, }).then((res) => { if (res.data.code == 0) { let data = res.data.data; let imageUrl = data.urls; alert("success:image:"+imageUrl); } else { alert("error:"+res.data.msg); } } ).catch(err=>{ alert('网络错误:'+err.message); }); } return { handleFile, selFiles, delqueue, upload, } }}</script><style scoped></style> |
三，后端php代码:
|
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
|
//多图片上传public function multiImgAdd(Request $request) { if ($request->hasFile('img')) { $str = ""; //遍历文件 foreach ($request->file('img') as $index=> $e) { //得到扩展名 $ext = $e->getClientOriginalExtension(); $filename = time().rand().".".$ext; $baseDir = "/var/www/html/digImage"; //保存图片到指定目录 $e->move($baseDir,$filename); //返回url $url = "http://192.168.219.6/digImage/".$filename; if ($str == '') { $str = $url; } else { $str .= ";".$url; } } return Result::Success(['urls'=>$str]); }else{ // 回到上一个页面 //return back(); return Result::ErrorCode(10024,'图片文件未上传'); }} |
说明：刘宏缔的架构森林—专注it技术的博客，
网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/10/29/laravel-duo-tu-pian-shang-chuan-10-27-qian-duan-vue/
代码: https://github.com/liuhongdi/ 或 https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: 371125307@qq.com
四，测试效果:
五,查看laravel框架的版本:
liuhongdi@lhdpc:/data/laravel/dignews$ php artisan --version
Laravel Framework 10.27.0