vue上传文件到php,vuejs+element-ui+laravel5.4上传文件

前言

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

element-ui的upload组件

我的vue代码：

:action="uploadAction"

list-type="picture-card"

:on-remove="handleRemove"

:on-success="handleSuccess"

:before-upload="handleBefore"

:file-list="files">

这里说一下 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, '文件未通过验证');

}

}

}

到此，已经可以放上全部要用到的代码了，喜欢的点个赞 =_=