Home > Backend Development > PHP Tutorial > About uploading images to Qiniu Cloud in front-end js in Laravel

About uploading images to Qiniu Cloud in front-end js in Laravel

不言
Release: 2023-04-01 14:22:01
Original
1581 people have browsed it

This article mainly introduces the sample code for uploading images to Qiniu Cloud using front-end js in Laravel. It has certain reference value. Those who are interested can learn about it.

The following uses the browser to upload images in Laravel. To Qiniu Cloud, here are just some simple process examples.

1. First introduce the corresponding js file. The following is the StaticfileCDN introduced through CDN. Of course, there are many other ways to download it, such as bower, git, and the official website's SDK
Qiniu js is based on the Plupload plug-in package, so it needs Download Plupload, it is recommended to use 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>
Copy after login

2. Create a button to select a file

  <p id="container">
    <a class="btn btn-default btn-lg " id="pickfiles" href="#" rel="external nofollow" >
      <span>选择文件</span>
    </a>
  </p>
Copy after login

3 .Initialize uploader

(Please make sure that plupload has been introduced into the page when performing initialization). Here we need an uptoken upload credential, which needs to be generated and provided by the PHP backend. Let’s talk about how to obtain the token in a moment.

  function uploaderReady(token) {
    console.log(token);
    var uploader = Qiniu.uploader({
      runtimes: &#39;html5,flash,html4&#39;,   // 上传模式,依次退化
      browse_button: &#39;pickfiles&#39;,   //上传按钮的ID
      uptoken: token, // uptoken是上传凭证,由其他程序生成
     // uptoken_url: &#39;/uptoken&#39;,    // 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: &#39;http://ovngj7u9c.bkt.clouddn.com&#39;,  // bucket域名,下载资源时用到,必需
      container: &#39;container&#39;,       // 上传区域DOM ID,默认是browser_button的父元素
      max_file_size: &#39;100mb&#39;,       // 最大文件体积限制
      flash_swf_url: &#39;path/of/plupload/Moxie.swf&#39;, //引入flash,相对路径
      max_retries: 1,           // 上传失败最大重试次数
      dragdrop: true,           // 开启可拖曳上传
      drop_element: &#39;container&#39;,     // 拖曳上传区域元素的ID,拖曳文件或文件夹后可触发上传
      chunk_size: &#39;4mb&#39;,         // 分块上传时,每块的体积
      auto_start: true,          // 选择文件后自动上传,若关闭需要自己绑定事件触发上传

      init: {
        &#39;FilesAdded&#39;: function (up, files) {
          plupload.each(files, function (file) {
            // 文件添加进队列后,处理相关的事情
          });
        },
        &#39;BeforeUpload&#39;: function (up, file) {
          // 每个文件上传前,处理相关的事情
        },
        &#39;UploadProgress&#39;: function (up, file) {
          // 每个文件上传时,处理相关的事情
        },
        &#39;FileUploaded&#39;: function (up, file, info) {
          // 每个文件上传成功后,处理相关的事情
          // 其中info是文件上传成功后,服务端返回的json,形式如:
          // {
          //  "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
          //  "key": "gogopher.jpg"
          // }
          // 获取url路径 传入后台保存到数据库
           var domain = up.getOption(&#39;domain&#39;);
           var url = JSON.parse(info);
           var sourceLink = domain +"/"+ url.key;

           $.ajax({
            url: &#39;/image&#39;,
            type: &#39;POST&#39;,
            dataType : &#39;json&#39;,
            data: {
              &#39;_token&#39;:"{{ csrf_token() }}",
              "url":sourceLink
            },
           });
        },
        &#39;Error&#39;: function (up, err, errTip) {
          console.log(errTip);
        },
        &#39;UploadComplete&#39;: function () {
          //队列文件处理完毕后,处理相关的事情
        },
        &#39;Key&#39;: function (up, file) {
          // 若想在前端对每个文件的key进行个性化处理,可以配置该函数
          // 该配置必须要在unique_names: false,save_key: false时才生效
          var key = "";
          // do something with key here
          return key
        }
      }
    });
  }
Copy after login

4. The backend obtains the upload certificate token

First we install a Qiniu packagist and github address.

composer require "overtrue/laravel-filesystem-qiniu" -vvv
Copy after login

Add

&#39;providers&#39; => [
  // Other service providers...
  Overtrue\LaravelFilesystem\Qiniu\QiniuStorageServiceProvider::class,
],
Copy after login

in app/config.php and then in config/ filesystems.php Configure your Qiniu information

<?php

return [
  //...
  &#39;qiniu&#39; => [
    &#39;driver&#39;   => &#39;qiniu&#39;,
    &#39;access_key&#39; => env(&#39;QINIU_ACCESS_KEY&#39;, &#39;xxxxxxxxxxxxxxxx&#39;),
    &#39;secret_key&#39; => env(&#39;QINIU_SECRET_KEY&#39;, &#39;xxxxxxxxxxxxxxxx&#39;),
    &#39;bucket&#39;   => env(&#39;QINIU_BUCKET&#39;, &#39;test&#39;),
    &#39;domain&#39;   => env(&#39;QINIU_DOMAIN&#39;, &#39;xxx.clouddn.com&#39;), // or host: https://xxxx.clouddn.com
  ],
  //...
];
Copy after login

Then write the code to obtain the token in the store method of your controller, which will be used by the front end in a while The ajax request is obtained

public function store()
{
  $disk = Storage::disk(&#39;qiniu&#39;);
  $token = $disk->getUploadToken();
  
  return response()->json([&#39;uptoken&#39;=>$token]);
}
Copy after login

5. After having the token, we continue to improve the front-end code

In order to understand, we write an ajax Request the store. Of course, you can also set the request address in the uptoken_url attribute in the uploader.

function getTokenMessage() {
  $.ajax({
    url: &#39;你的控制器地址&#39;,
    type: &#39;POST&#39;,
    data: {&#39;_token&#39;:"{{ csrf_token() }}"},
    dataType : &#39;json&#39;,
    success: function (data) {
      var obj = data;
      // 请求成功之后,调用刚刚写好的uploaderReady方法,把token传入过去
      uploaderReady(obj.uptoken);
    }
  });
}
//让页面初始化的时候就请求
$(document).ready(function(){
  getTokenMessage();
});
Copy after login

This is almost enough. For more operation reference documents, Qiniu Cloud official js document

The above is the summary of this article All content, I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

For the functions of Laravel framework template loading and assigning variables and simple routing

The above is the detailed content of About uploading images to Qiniu Cloud in front-end js in Laravel. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template