laravel:单图片上传(10.27.0/前端vue)
一，相关文档
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
95
96
97
|
<template> <div> <div style="width:800px;margin: auto;display: flex;flex-direction: column;"> 请选择上传图片: <input type="file" id="back" ref="backfile" @change="handleFile" /><br/> <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> </div> <div> <input type="button" value="上传" @click="upload" /> </div> </div> </div></template><script>import {ref} from "vue";import axios from 'axios';export default { name: "ImgUpload", 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 upload = () => { //判断是否选中文件 if (selFiles.value.length == 0) { alert("请在上传前先选中文件!"); return; } var file = selFiles.value[0].file; if (typeof(file) === "undefined") { alert("请在上传前先选中文件!"); return; } // 创建一个表单数据 var data = new FormData(); //遍历文件并上传 for( var i=0;i<selFiles.value.length; i++ ){ let fileOne = selFiles.value[i].file; data.append("img",fileOne); } data.append("userName","laoliu"); let url = "/api/news/imgadd"; //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; console.log(data); let imageUrl = data.url; alert("success:image:"+imageUrl); } else { alert("error:"+res.data.msg); } } ).catch(err=>{ alert('网络错误:'+err.message); }); } return { selFiles, handleFile, 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
|
public function imgadd(Request $request) { // 判断文件是否上传 // 实例 if ($request->hasFile('img')) { // 获取后缀名 $ext=$request->file('img')->getClientOriginalExtension(); // 新的文件名 $newFile=time().rand().".".$ext; //保存到目录 $baseDir = "/var/www/html/digImage"; // 上传文件操作 $request->file('img')->move($baseDir,$newFile); //得到图片的url $url = "http://192.168.219.6/digImage/".$newFile; //返回 return Result::Success(['url'=>$url]); }else{ // 回到上一个页面 //return back(); return Result::ErrorCode(10024,'图片文件未上传'); }} |
说明：刘宏缔的架构森林—专注it技术的博客，
网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/10/29/laravel-dan-tu-pian-shang-chuan-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