vuejs+element-ui+laravel5.4上传文件的示例代码
前言
之前的文章讲得太多安装了,今天就不说这个了,因为我的项目是前后端分离的,所以基本是分开执行代码逻辑。其中还有跨域问题,主要还是在laravel中添加头信息放行之类的,这里会提一下做法。
element-ui的upload组件
我的vue代码:
<template> <el-upload :action="uploadaction" list-type="picture-card" :on-remove="handleremove" :on-success="handlesuccess" :before-upload="handlebefore" :file-list="files"> <i class="el-icon-plus"></i> </el-upload> <el-dialog v-model="dialogvisible" size="tiny"> <img width="100%" :src="dialogimageurl" alt=""> </el-dialog> </template>
这里说一下 on-preview与on-success都可以拿到服务器的返回路径
其中:action="uploadaction"是服务器接引地址, list-type为限制上传格式
而:on-remove="handleremove"为移除图片时对应的方法,:before-upload="handlebefore"
为上传前的操作,这里我用于限制上传的数量限制, :file-list="files"上传后数据绑定在这里
这里我是使用:on-success="handlesuccess"来拿服务器的返回数据的
在
export default { data(){ return { files: [], uploadaction:'http://服务器地址' } }, methods: { handlesuccess(response){ console.log(response) this.files = [{name: response.name, url: imgbaseurl + response.photo}] }, handlebefore(){ return this.files.length === 1 ? false : true // 只让它上传一张 }, handleremove(file, filelist) { console.log(file, filelist) } } }
laravel跨域
laravel跨域需要添加一个中间件
在app/http/middleware下 新建文件cors.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
添加
protected $routemiddleware = [ // some class 'cors' => \app\http\middleware\cors::class, ];
laravel 路由
调用中间件来限制路由,这里用了dingo api,如不清楚请看前面的文章
$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
namespace app\api\v1\controllers\upload; 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()) { // 获取文件相关信息 $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([], 500, '文件未通过验证'); } } }
到此,已经可以放上全部要用到的代码了,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: JScript实现表格的简单操作
下一篇: js移动端事件基础及常用事件库详解