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 YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
jsTree使用记录实例
Dec 01 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
JS实现拼图游戏
Jan 29 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(视频)Http下载
2006/12/12 PHP
分享PHP header函数使用教程
2013/09/05 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
php多重接口的实现方法
2015/06/20 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
Python生成密码库功能示例
2017/05/23 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
Python制作动态字符图的实例
2019/01/27 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
Python创建数字列表的示例
2019/11/28 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
python IDLE添加行号显示教程
2020/04/25 Python
Python如何读取、写入JSON数据
2020/07/28 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
软件测试面试题
2015/10/21 面试题
就业自荐信
2013/12/04 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript