溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
之前的文章講得太多安裝了，今天就不說這個了，因為我的項目是前后端分離的，所以基本是分開執行代碼邏輯。其中還有跨域問題，主要還是在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, '文件未通過驗證');
}
}
}
到此，已經可以放上全部要用到的代碼了，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
