この記事では主に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 サイトの他の関連記事を参照してください。

PHPタイプは、コードの品質と読みやすさを向上させるためのプロンプトがあります。 1)スカラータイプのヒント:php7.0であるため、基本データ型は、int、floatなどの関数パラメーターで指定できます。 3)ユニオンタイプのプロンプト:PHP8.0であるため、関数パラメーターまたは戻り値で複数のタイプを指定することができます。 4)Nullable Typeプロンプト:null値を含めることができ、null値を返す可能性のある機能を処理できます。

PHPでは、クローンキーワードを使用してオブジェクトのコピーを作成し、\ _ \ _クローンマジックメソッドを使用してクローン動作をカスタマイズします。 1.クローンキーワードを使用して浅いコピーを作成し、オブジェクトのプロパティをクローン化しますが、オブジェクトのプロパティはクローニングしません。 2。\ _ \ _クローン法は、浅いコピーの問題を避けるために、ネストされたオブジェクトを深くコピーできます。 3.クローニングにおける円形の参照とパフォーマンスの問題を避けるために注意し、クローニング操作を最適化して効率を向上させます。

PHPはWeb開発およびコンテンツ管理システムに適しており、Pythonはデータサイエンス、機械学習、自動化スクリプトに適しています。 1.PHPは、高速でスケーラブルなWebサイトとアプリケーションの構築においてうまく機能し、WordPressなどのCMSで一般的に使用されます。 2。Pythonは、NumpyやTensorflowなどの豊富なライブラリを使用して、データサイエンスと機械学習の分野で驚くほどパフォーマンスを発揮しています。

HTTPキャッシュヘッダーの主要なプレーヤーには、キャッシュコントロール、ETAG、およびラスト修飾が含まれます。 1.Cache-Controlは、キャッシュポリシーを制御するために使用されます。例:キャッシュコントロール:Max-Age = 3600、public。 2。ETAGは、一意の識別子を介してリソースの変更を検証します。例:ETAG: "686897696A7C876B7E"。 3. Last-Modifiedは、リソースの最後の変更時間を示しています。

PHPでは、Password_hashとpassword_verify関数を使用して安全なパスワードハッシュを実装する必要があり、MD5またはSHA1を使用しないでください。 1)password_hashセキュリティを強化するために、塩値を含むハッシュを生成します。 2)password_verifyハッシュ値を比較して、パスワードを確認し、セキュリティを確保します。 3)MD5とSHA1は脆弱であり、塩の値が不足しており、最新のパスワードセキュリティには適していません。

PHPは、動的なWeb開発およびサーバー側のアプリケーションに使用されるサーバー側のスクリプト言語です。 1.PHPは、編集を必要とせず、迅速な発展に適した解釈言語です。 2。PHPコードはHTMLに組み込まれているため、Webページの開発が簡単になりました。 3。PHPプロセスサーバー側のロジック、HTML出力を生成し、ユーザーの相互作用とデータ処理をサポートします。 4。PHPは、データベースと対話し、プロセスフォームの送信、サーバー側のタスクを実行できます。

PHPは過去数十年にわたってネットワークを形成しており、Web開発において重要な役割を果たし続けます。 1)PHPは1994年に発信され、MySQLとのシームレスな統合により、開発者にとって最初の選択肢となっています。 2)コア関数には、動的なコンテンツの生成とデータベースとの統合が含まれ、ウェブサイトをリアルタイムで更新し、パーソナライズされた方法で表示できるようにします。 3)PHPの幅広いアプリケーションとエコシステムは、長期的な影響を促進していますが、バージョンの更新とセキュリティの課題にも直面しています。 4)PHP7のリリースなど、近年のパフォーマンスの改善により、現代の言語と競合できるようになりました。 5)将来的には、PHPはコンテナ化やマイクロサービスなどの新しい課題に対処する必要がありますが、その柔軟性とアクティブなコミュニティにより適応性があります。

PHPの中心的な利点には、学習の容易さ、強力なWeb開発サポート、豊富なライブラリとフレームワーク、高性能とスケーラビリティ、クロスプラットフォームの互換性、費用対効果が含まれます。 1)初心者に適した学習と使用が簡単。 2)Webサーバーとの適切な統合および複数のデータベースをサポートします。 3)Laravelなどの強力なフレームワークを持っています。 4)最適化を通じて高性能を達成できます。 5)複数のオペレーティングシステムをサポートします。 6)開発コストを削減するためのオープンソース。


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

WebStorm Mac版
便利なJavaScript開発ツール

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!

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