前言
之前的文章讲得太多安装了，今天就不说这个了，因为我的项目是前后端分离的，所以基本是分开执行代码逻辑。其中还有跨域问题，主要还是在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"来拿服务器的返回数据的
在
laravel跨域
laravel跨域需要添加一个中间件
在app/Http/middleware下 新建文件Cors.php,输入
use Closure;
class Cors
{
/**
- Handle an incoming request.
-
- @param IlluminateHttpRequest $request
- @param Closure $next
- @return mixed
/
public function handle($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
添加
AppHttpMiddlewareCors::class,];
laravel 路由
调用中间件来限制路由，这里用了dingo api，如不清楚请看前面的文章
version('v1',['middleware' => 'cors'],function (Router $api) {
$api->post('upfile','AppApiV1ControllersUploadUploadFiles@upfile');
}
配置Store
打开config/filesystems.php 找到 disks
[
// 上面还有很多，下面是自己加的
// 新建一个本地端uploads空间（目录） 用于存储上传的文件
'uploads' => [
'driver' => 'local',// 文件将上传到storage/app/uploads目录
'root' => storage_path('app/uploads'),// 文件将上传到public/uploads目录 如果需要浏览器直接访问 请设置成这个
//'root' => public_path('uploads'),],]
开始上传
新建一个上传Controller,下面很多判断没有做，自行做吧
AppApiV1ControllersUploadUploadFiles.php
use DingoApiHttpRequest;
use DingoApiExceptionStoreResourceFailedException;
use Storage;
class UploadFiles
{
public function upfile(Request $request) {
if (!$request->hasFile('file')) {
return response()->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');
return response()->json([
'status_code' => 200,'message' => 'success','photo' => $path,'name' => $originalName,]);
} else {
return response()->json([],'文件未通过验证');
}
}
}
到此，已经可以放上全部要用到的代码了，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
