前言
之前的文章講得太多安裝了，今天就不說這個了，因為我的項目是前后端分離的，所以基本是分開執行代碼邏輯。其中還有跨域問題，主要還是在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, '文件未通過驗證'); } }}到此，已經可以放上全部要用到的代碼了，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
