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


Posted in Javascript onAugust 12, 2017

前言

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

到此,已经可以放上全部要用到的代码了,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
纯javascript响应式树形菜单效果
Nov 10 Javascript
js获取图片宽高的方法
Nov 25 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
js 模仿锚点定位的实现方法
Nov 19 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 #Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 #Javascript
js模块加载方式浅析
Aug 12 #Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 #Javascript
Node.js pipe实现源码解析
Aug 12 #Javascript
vue实现移动端图片裁剪上传功能
Aug 18 #Javascript
JavaScript实现图片切换效果
Aug 12 #Javascript
You might like
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
php生成随机密码的三种方法小结
2010/09/04 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
React进阶学习之组件的解耦之道
2017/08/07 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
python截取两个单词之间的内容方法
2018/12/25 Python
django admin组件使用方法详解
2019/07/19 Python
如何基于Python批量下载音乐
2019/11/11 Python
python3.8下载及安装步骤详解
2020/01/15 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
课例研修方案
2014/05/31 职场文书
工地安全生产标语
2014/06/06 职场文书
经济管理自荐书
2014/06/09 职场文书