欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-14 19:21:36
前言 之前的文章讲得太多安装了,今天就不说这个了,因为我的项目是前后端分离的,所以基本是分开执行代码逻辑。其中还有跨域问题,主要还是在laravel中添加头信息放行之...

前言

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

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