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中this做事件参数相关问题解答
Mar 17 Javascript
jQuery实现点击标题输入详细信息
Apr 16 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 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 xml实例 留言本
2009/03/20 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
深入PHP异步执行的详解
2013/06/03 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
python基础教程项目五之虚拟茶话会
2018/04/02 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
python数据预处理方式 :数据降维
2020/02/24 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
设计部经理的岗位职责
2013/11/16 职场文书
法人授权委托书范本
2014/04/04 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
建设工地安全标语
2014/06/07 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
学校运动会开幕词
2016/03/03 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL