Laravel 프레임워크에서 javascript를 사용하여 Qiniu Cloud에 이미지를 업로드하는 사례에 대한 자세한 설명

다음은 브라우저를 사용하여 Laravel의 Qiniu Cloud에 이미지를 업로드하는 것입니다.

1. 먼저 해당 js 파일을 소개합니다. 다음은 CDN을 통해 소개된 StaticfileCDN입니다. 물론 Bower, git, 공식 홈페이지의 SDK 등 다양한 다운로드 방법이 있습니다. 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. 업로더 초기화

(초기화를 수행할 때 페이지에 plupload가 도입되었는지 확인하세요). uptoken 업로드 자격 증명, 이를 위해서는 PHP 백엔드 생성 및 프로비저닝이 필요합니다. 잠시 후 토큰을 얻는 방법에 대해 이야기해보겠습니다.

  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. 백엔드는 업로드 인증서 토큰을 얻습니다

먼저 Qiniu packagist와 github 주소를 설치합니다.

composer require "overtrue/laravel-filesystem-qiniu" -vvv

app/config.php에

'providers' => [
  // Other service providers...
  Overtrue\LaravelFilesystem\Qiniu\QiniuStorageServiceProvider::class,
],

를 추가한 다음 config/filesystems.php

<?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
  ],
  //...
];

에서 Qiniu 정보를 구성한 다음 컨트롤러의 store 메소드에 작성하세요. 코드 가져오기 잠시 후 프런트엔드는 ajax를 사용하여 요청할 수 있습니다

public function store()
{
  $disk = Storage::disk('qiniu');
  $token = $disk->getUploadToken();
  
  return response()->json(['uptoken'=>$token]);
}

5. 토큰을 받은 후 프런트엔드 코드를 계속 개선합니다

이해하기 위해 다음과 같이 작성합니다. 물론 스토어를 요청하는 ajax도 가능합니다. 업로더의 uptoken_url 속성은 요청 주소를 설정합니다.

rreee

위 내용은 Laravel 프레임워크에서 javascript를 사용하여 Qiniu Cloud에 이미지를 업로드하는 사례에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!