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

<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="/UploadFiles/2021-04-02/dialogImageUrl">

这里说一下 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 "htmlcode">

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, '文件未通过验证');
    }
  }
}




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