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 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
js简单倒计时实现代码
Apr 30 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
微信小程序纯文本实现@功能
Apr 08 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 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
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
JavaScript日历实现代码
2010/09/12 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
在Python下尝试多线程编程
2015/04/28 Python
python os用法总结
2018/06/08 Python
python版飞机大战代码分享
2018/11/20 Python
python flask搭建web应用教程
2019/11/19 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
后勤工作职责
2013/12/22 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
预备党员表决心书
2014/03/11 职场文书
贷款担保书范文
2014/05/13 职场文书
2015政治思想表现评语
2015/03/25 职场文书
《三国志》赏析
2019/08/27 职场文书
使用Django实现商城验证码模块的方法
2021/06/01 Python
Python实现对齐打印 format函数的用法
2022/04/28 Python
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS