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

2019-11-19 15:49:24

字体：大中小

来源：转载

供稿：网友

前言

之前的文章讲得太多安装了，今天就不说这个了，因为我的项目是前后端分离的，所以基本是分开执行代码逻辑。其中还有跨域问题，主要还是在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, '文件未通过验证');    }  }}

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

上一篇：react开发教程之React 组件之间的通信方式

下一篇：浅谈关于angularJs中使用$.ajax的注意点