Heim > Artikel > Backend-Entwicklung > Detaillierte Erläuterung des Laravel-Framework-Frontends zum Hochladen von Bildern in die Qiniu Cloud-Instanz
In diesem Artikel wird hauptsächlich der Beispielcode zum Hochladen von Bildern in die Qiniu Cloud mithilfe von Front-End-JS in Laravel vorgestellt. Er hat einen gewissen Referenzwert.
Im Folgenden wird der Browser verwendet Laden Sie Bilder in Laravel hoch. Hier sind nur einige einfache Prozessbeispiele.
1. Stellen Sie zunächst die entsprechende js-Datei vor. Natürlich gibt es viele andere Möglichkeiten zum Herunterladen, z. B. Bower, Git und das SDK der offiziellen Website Qiniu js basiert auf dem Plupload-Plug-In und muss daher Plupload herunterladen. Es wird empfohlen, 2.1.1 bis 2.1.9 zu verwenden.
<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. Erstellen Sie eine Schaltfläche zum Auswählen einer Datei
<p id="container"> <a class="btn btn-default btn-lg " id="pickfiles" href="#" rel="external nofollow" > <span>选择文件</span> </a> </p>3. Initialisierungs-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. Das Backend erhält das Upload-Zertifikat-Token
composer require "overtrue/laravel-filesystem-qiniu" -vvvFügen Sie
'providers' => [ // Other service providers... Overtrue\LaravelFilesystem\Qiniu\QiniuStorageServiceProvider::class, ],in app/config.php und dann in config/filesystems hinzu. Konfigurieren Sie Ihre Qiniu-Informationen in PHP
<?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 ], //... ];und schreiben Sie dann den Code, um das Token in der Store-Methode Ihres Controllers zu erhalten. Nach einer Weile kann das Frontend eine Anfrage stellen es mit Ajax.
public function store() { $disk = Storage::disk('qiniu'); $token = $disk->getUploadToken(); return response()->json(['uptoken'=>$token]); }Nachdem wir das Token haben, verbessern wir den Front-End-Code weiter
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(); });Das ist alles. Weitere Informationen finden Sie im offiziellen js-Dokument von Qiniu Cloud
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Laravel-Framework-Frontends zum Hochladen von Bildern in die Qiniu Cloud-Instanz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!