vuejs+element-ui+laravel5.4上传文件的示例代码

2023-09-26 14:59:05 121

前言

之前的文章讲得太多安装了，今天就不说这个了，因为我的项目是前后端分离的，所以基本是分开执行代码逻辑。其中还有跨域问题，主要还是在laravel中添加头信息放行之类的，这里会提一下做法。

element-ui的upload组件

我的vue代码：

这里说一下on-preview与on-success都可以拿到服务器的返回路径

其中:action="uploadAction"是服务器接引地址,list-type为限制上传格式

而:on-remove="handleRemove"为移除图片时对应的方法,:before-upload="handleBefore"

为上传前的操作，这里我用于限制上传的数量限制，:file-list="files"上传后数据绑定在这里

这里我是使用:on-success="handleSuccess"来拿服务器的返回数据的

在

exportdefault{
data(){
return{
files:[],
uploadAction:'http://服务器地址'
}
},
methods:{
handleSuccess(response){
console.log(response)
this.files=[{name:response.name,url:imgBaseUrl+response.photo}]
},
handleBefore(){
returnthis.files.length===1?false:true//只让它上传一张
},
handleRemove(file,fileList){
console.log(file,fileList)
}
}
}

laravel跨域

laravel跨域需要添加一个中间件

在app/Http/middleware下新建文件Cors.php,输入

namespaceApp\Http\Middleware;

useClosure;

classCors
{
/**
*Handleanincomingrequest.
*
*@param\Illuminate\Http\Request$request
*@param\Closure$next
*@returnmixed
*/
publicfunctionhandle($request,Closure$next)
{
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:GET,POST,PATCH,PUT,DELETE,OPTIONS');
header('Access-Control-Allow-Headers:Origin,Content-Type,X-Auth-Token');
return$next($request);
}
}

在appHttpKernel.php

添加

protected$routeMiddleware=[
//someclass
'cors'=>\App\Http\Middleware\Cors::class,
];

laravel路由

调用中间件来限制路由，这里用了dingoapi，如不清楚请看前面的文章

$api->version('v1',['middleware'=>'cors'],function(Router$api){
$api->post('upfile','App\\Api\\V1\\Controllers\\Upload\\UploadFiles@upfile');
}

配置Store

打开config/filesystems.php找到disks

'disks'=>[

//上面还有很多，下面是自己加的
//新建一个本地端uploads空间（目录）用于存储上传的文件
'uploads'=>[

'driver'=>'local',

//文件将上传到storage/app/uploads目录
'root'=>storage_path('app/uploads'),

//文件将上传到public/uploads目录如果需要浏览器直接访问请设置成这个
//'root'=>public_path('uploads'),
],
]

开始上传

新建一个上传Controller,下面很多判断没有做，自行做吧

AppApiV1ControllersUploadUploadFiles.php

namespaceApp\Api\V1\Controllers\Upload;


useDingo\Api\Http\Request;
useDingo\Api\Exception\StoreResourceFailedException;
useStorage;

classUploadFiles
{
publicfunctionupfile(Request$request){
if(!$request->hasFile('file')){
returnresponse()->json([],500,'无法获取上传文件');
}
$file=$request->file('file');

if($file->isValid()){
//获取文件相关信息
$originalName=$file->getClientOriginalName();//文件原名
$ext=$file->getClientOriginalExtension();//扩展名
$realPath=$file->getRealPath();//临时文件的绝对路径
$type=$file->getClientMimeType();//image/jpeg

//上传文件
$filename=date('Ymd/His');
//使用我们新建的uploads本地存储空间（目录）
$path=$file->store($filename,'uploads');
returnresponse()->json([
'status_code'=>200,
'message'=>'success',
'photo'=>$path,
'name'=>$originalName,
]);

}else{
returnresponse()->json([],500,'文件未通过验证');
}
}
}

到此，已经可以放上全部要用到的代码了，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

vuejs+element-ui+laravel5.4上传文件的示例代码

热门推荐

随机推荐