この記事では主にLaravelのフロントエンドjsを使ってQiniu Cloudに画像をアップロードするサンプルコードを紹介していますので、興味のある方は参考にしてください。
以下はブラウザを使用しています。 Laravel で画像を Qiniu Cloud にアップロードするための簡単なプロセスの例をいくつか示します。
1. まず、対応する js ファイルを導入します。以下は CDN を通じて導入された StaticfileCDN です。もちろん、bower、git、公式 Web サイトの SDK など、さまざまな方法でダウンロードできます。 Qiniu js は Plupload プラグイン パッケージに基づいているため、Plupload をダウンロードする必要があります。2.1.1 ~ 2.1.9 を使用することをお勧めします。
<script src="https://cdn.staticfile.org/jquery/2.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/plupload/2.1.9/moxie.js"></script> <script src="https://cdn.staticfile.org/plupload/2.1.9/plupload.dev.js"></script> <script src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js"></script>2. ファイルを選択するボタンを作成します
<p id="container"> <a class="btn btn-default btn-lg " id="pickfiles" href="#" rel="external nofollow" > <span>选择文件</span> </a> </p>3 .uploader の初期化
function uploaderReady(token) { console.log(token); var uploader = Qiniu.uploader({ runtimes: 'html5,flash,html4', // 上传模式,依次退化 browse_button: 'pickfiles', //上传按钮的ID uptoken: token, // uptoken是上传凭证,由其他程序生成 // uptoken_url: '/uptoken', // Ajax请求uptoken的Url,强烈建议设置(服务端提供) // uptoken_func: function(){ // 在需要获取uptoken时,该方法会被调用 // // do something // return uptoken; // }, get_new_uptoken: false, // 设置上传文件的时候是否每次都重新获取新的uptoken unique_names: true, // 默认false,key为文件名。若开启该选项,JS-SDK会为每个文件自动生成key(文件名) //save_key: true, // 默认false。若在服务端生成uptoken的上传策略中指定了sava_key,则开启,SDK在前端将不对key进行任何处理 domain: 'http://ovngj7u9c.bkt.clouddn.com', // bucket域名,下载资源时用到,必需 container: 'container', // 上传区域DOM ID,默认是browser_button的父元素 max_file_size: '100mb', // 最大文件体积限制 flash_swf_url: 'path/of/plupload/Moxie.swf', //引入flash,相对路径 max_retries: 1, // 上传失败最大重试次数 dragdrop: true, // 开启可拖曳上传 drop_element: 'container', // 拖曳上传区域元素的ID,拖曳文件或文件夹后可触发上传 chunk_size: '4mb', // 分块上传时,每块的体积 auto_start: true, // 选择文件后自动上传,若关闭需要自己绑定事件触发上传 init: { 'FilesAdded': function (up, files) { plupload.each(files, function (file) { // 文件添加进队列后,处理相关的事情 }); }, 'BeforeUpload': function (up, file) { // 每个文件上传前,处理相关的事情 }, 'UploadProgress': function (up, file) { // 每个文件上传时,处理相关的事情 }, 'FileUploaded': function (up, file, info) { // 每个文件上传成功后,处理相关的事情 // 其中info是文件上传成功后,服务端返回的json,形式如: // { // "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98", // "key": "gogopher.jpg" // } // 获取url路径 传入后台保存到数据库 var domain = up.getOption('domain'); var url = JSON.parse(info); var sourceLink = domain +"/"+ url.key; $.ajax({ url: '/image', type: 'POST', dataType : 'json', data: { '_token':"{{ csrf_token() }}", "url":sourceLink }, }); }, 'Error': function (up, err, errTip) { console.log(errTip); }, 'UploadComplete': function () { //队列文件处理完毕后,处理相关的事情 }, 'Key': function (up, file) { // 若想在前端对每个文件的key进行个性化处理,可以配置该函数 // 该配置必须要在unique_names: false,save_key: false时才生效 var key = ""; // do something with key here return key } } }); }4. バックエンドはアップロード証明書トークンを取得します
composer require "overtrue/laravel-filesystem-qiniu" -vvv
'providers' => [ // Other service providers... Overtrue\LaravelFilesystem\Qiniu\QiniuStorageServiceProvider::class, ],を app/config.php に追加し、次に config/ に追加します。 filesystems.php Qiniu 情報を構成します
<?php return [ //... 'qiniu' => [ 'driver' => 'qiniu', 'access_key' => env('QINIU_ACCESS_KEY', 'xxxxxxxxxxxxxxxx'), 'secret_key' => env('QINIU_SECRET_KEY', 'xxxxxxxxxxxxxxxx'), 'bucket' => env('QINIU_BUCKET', 'test'), 'domain' => env('QINIU_DOMAIN', 'xxx.clouddn.com'), // or host: https://xxxx.clouddn.com ], //... ];次に、フロントエンドで使用される、コントローラーのストア メソッドでトークンを取得するコードを記述します。しばらくすると、ajax リクエストが取得されます
public function store() { $disk = Storage::disk('qiniu'); $token = $disk->getUploadToken(); return response()->json(['uptoken'=>$token]); }5。トークンを取得した後、フロントエンド コードの改善を続けます
function getTokenMessage() { $.ajax({ url: '你的控制器地址', type: 'POST', data: {'_token':"{{ csrf_token() }}"}, dataType : 'json', success: function (data) { var obj = data; // 请求成功之后,调用刚刚写好的uploaderReady方法,把token传入过去 uploaderReady(obj.uptoken); } }); } //让页面初始化的时候就请求 $(document).ready(function(){ getTokenMessage(); });これ以上の操作リファレンス ドキュメントについては、Qiniu Cloud 公式 js ドキュメント
Laravel フレームワーク テンプレートの変数の読み込みと割り当て、および単純なルーティングの機能については、
以上がLaravel のフロントエンド JS での Qiniu Cloud への画像のアップロードについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

多くの場合、キーワードと追跡パラメーターで散らかった長いURLは、訪問者を阻止できます。 URL短縮スクリプトはソリューションを提供し、ソーシャルメディアやその他のプラットフォームに最適な簡潔なリンクを作成します。 これらのスクリプトは、個々のWebサイトにとって価値があります

2012年のFacebookによる有名な買収に続いて、Instagramはサードパーティの使用のために2セットのAPIを採用しました。これらはInstagramグラフAPIとInstagram Basic Display APIです。

Laravelは、直感的なフラッシュメソッドを使用して、一時的なセッションデータの処理を簡素化します。これは、アプリケーション内に簡単なメッセージ、アラート、または通知を表示するのに最適です。 データは、デフォルトで次の要求のためにのみ持続します。 $リクエスト -

これは、LaravelバックエンドとのReactアプリケーションの構築に関するシリーズの2番目と最終部分です。シリーズの最初の部分では、基本的な製品上場アプリケーションのためにLaravelを使用してRESTFUL APIを作成しました。このチュートリアルでは、開発者になります

Laravelは簡潔なHTTP応答シミュレーション構文を提供し、HTTP相互作用テストを簡素化します。このアプローチは、テストシミュレーションをより直感的にしながら、コード冗長性を大幅に削減します。 基本的な実装は、さまざまな応答タイプのショートカットを提供します。 Illuminate \ support \ facades \ httpを使用します。 http :: fake([[ 'google.com' => 'hello world'、 'github.com' => ['foo' => 'bar']、 'forge.laravel.com' =>

PHPクライアントURL(CURL)拡張機能は、開発者にとって強力なツールであり、リモートサーバーやREST APIとのシームレスな対話を可能にします。尊敬されるマルチプロトコルファイル転送ライブラリであるLibcurlを活用することにより、PHP Curlは効率的なexecuを促進します

顧客の最も差し迫った問題にリアルタイムでインスタントソリューションを提供したいですか? ライブチャットを使用すると、顧客とのリアルタイムな会話を行い、すぐに問題を解決できます。それはあなたがあなたのカスタムにより速いサービスを提供することを可能にします

2025 PHP Landscape Surveyは、現在のPHP開発動向を調査しています。 開発者や企業に洞察を提供することを目的とした、フレームワークの使用、展開方法、および課題を調査します。 この調査では、現代のPHP Versioの成長が予想されています


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

ドリームウィーバー CS6
ビジュアル Web 開発ツール

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
