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="dialogImageUrl" alt="">
 </el-dialog>
</template>

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)
 }
 }
}

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);
 }
}

 protected $routeMiddleware = [
 // some class
 'cors' => \App\Http\Middleware\Cors::class,
 ];

$api->version('v1', ['middleware' => 'cors'], function (Router $api) {
 $api->post('upfile', 'App\\Api\\V1\\Controllers\\Upload\\UploadFiles@upfile');
}

'disks' => [

 // 上面還有很多，下面是自己加的
 // 新建一個本地端uploads空間（目錄） 用于存儲上傳的文件
 'uploads' => [

 'driver' => 'local',

 // 文件將上傳到storage/app/uploads目錄
 'root' => storage_path('app/uploads'),

 // 文件將上傳到public/uploads目錄 如果需要瀏覽器直接訪問 請設置成這個
 //'root' => public_path('uploads'),
 ],
] 

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, '文件未通過驗證');
 }
 }
}