一,相关文档
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
说明:作者:刘宏缔 邮箱: [email protected]
四,测试效果:
五,查看laravel框架的版本:
liuhongdi@lhdpc:/data/laravel/dignews$ php artisan --version
Laravel Framework 10.27.0
标签:laravel,vue,selFiles,10.27,url,上传,file,div,data
From: https://www.cnblogs.com/architectforest/p/17796999.html