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

前言

之前的文章讲得太多安装了，今天就不说这个了，因为我的项目是前后端分离的，所以基本是分开执行代码逻辑。其中还有跨域问题，主要还是在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"来拿服务器的返回数据的

在

上传一张 },handleRemove(file,fileList) { console.log(file,fileList) } } }

laravel跨域

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

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

PHP;"> namespace App\Http\Middleware;

use Closure;

class Cors
{
/**

Handle an incoming request.
@param \Illuminate\Http\Request $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

添加

\App\Http\Middleware\Cors::class,];

laravel 路由

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

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

配置Store

打开config/filesystems.PHP 找到 disks

[

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

  'driver' => 'local',// <a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>将<a href="/tag/shangchuan/" target="_blank" class="keywords">上传</a>到storage/app/uploads目录
  'root' => storage_path('app/uploads'),// <a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>将<a href="/tag/shangchuan/" target="_blank" class="keywords">上传</a>到public/uploads目录 如果需要浏览器直接访问 请设置成这个
  //'root' => public_path('uploads'),],]

开始上传

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

AppApiV1ControllersUploadUploadFiles.PHP

use Dingo\Api\Http\Request;
use Dingo\Api\Exception\StoreResourceFailedException;
use Storage;

class UploadFiles
{
public function upfile(Request $request) {
if (!$request->hasFile('file')) {
return response()->json([],500,'无法获取上传文件');
}
$file = $request->file('file');

if ($file->isValid()) {
  // <a href="/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>相关信息
  $originalName = $file->getClientOriginalName(); // <a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>原名
  $ext = $file->getClientOriginalExtension();   // 扩展名
  $realPath = $file->getRealPath();  //临时<a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>的<a href="/tag/jueduilujing/" target="_blank" class="keywords">绝对路径</a>
  $type = $file->getClientMimeType();   // image/jpeg

  // <a href="/tag/shangchuan/" target="_blank" class="keywords">上传</a><a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>
  $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([],'<a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>未通过验证');
}

}
}

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

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

前言

element-ui的upload组件

laravel跨域

laravel 路由

开始上传

猜你在找的Vue相关文章