如何在Dropzone中添加下载链接 - Laravel 8使用Dropzone，你可以轻松地添加拖放文件上传区。它在文

使用Dropzone，你可以轻松地添加拖放文件上传区。它在文件上传后显示一个缩略图，但不显示下载链接。

在本教程中，我将展示如何在Laravel 8中文件成功上传后，在Dropzone容器中添加下载文件链接。

How to add download link in Dropzone - Laravel 8

内容

1.下载

从这里下载Dropzone库
将下载的文件解压到public/ 目录。

2.控制器

创建PageController 控制器：

php artisan make:controller PageController

打开app/Http/Controllers/PageController.php 文件。
创建两个方法 -
- index -加载index 视图。
- uploadFile -此方法用于上传Dropzone的选定文件。

定义文件的有效性。我把最大的文件大小设置为2MB（2048 Kb）。

如果文件没有被验证，那么就把0 分配给$data['success'] ，验证响应分配给$data['error'] 。

如果文件被成功验证，那么就把文件上传到"files" 。将上传的文件路径存储到$filepath 变量。

将1 赋给$data['success'] ，将$filepath 赋给$data['link'] ，将Uploaded Successfully! 赋给$data['message'] 。

以JSON格式返回$data 数组。

完成的代码

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;

class PageController extends Controller {

     public function index(){
          return view('index');
     }

     public function uploadFile(Request $request){

          $data = array();

          $validator = Validator::make($request->all(), [
               'file' => 'required|mimes:png,jpg,jpeg,pdf|max:2048'
          ]);

          if ($validator->fails()) {
 
              $data['success'] = 0;
              $data['error'] = $validator->errors()->first('file');// Error response

          }else{
               if($request->file('file')) {

                   $file = $request->file('file');
                   $filename = time().'_'.$file->getClientOriginalName();

                    // File upload location
                    $location = 'files';

                    // Upload file
                    $file->move($location,$filename);

                    // File path
                    $filepath = url($location.'/'.$filename);

                    // Response
                    $data['success'] = 1;
                    $data['link'] = $filepath;
                    $data['message'] = 'Uploaded Successfully!';

               }else{
                     // Response
                     $data['success'] = 0;
                     $data['message'] = 'File not uploaded.'; 
               }
          }

           return response()->json($data);
     }
}

3.路线

打开routes/web.php 文件。
定义2个路由 -

use App\Http\Controllers\PageController;

Route::get('/', [PageController::class, 'index']);
Route::post('/uploadFile', [PageController::class, 'uploadFile'])->name('uploadFile');

第二条路线用于上传Dropzone文件。

4.查看

在resources/views/ 文件夹中创建index.blade.php 文件。

在<meta > 标签中存储CSRF令牌，并包括Dropzone库。

Dropzone容器

创建一个<form action="{{route('uploadFile')}}" class='dropzone' > 。

脚本

从<meta > 标签读取CSRF令牌，并分配给CSRF_TOKEN 变量。
禁用Dropzone autoDiscover -Dropzone.autoDiscover = false 并在<form > 中初始化Dropzone。
设置最大上传文件大小为2MB和有效文件扩展名 - ".jpeg, .jpg, .png, .pdf"。
使用sending 事件发送CSRF令牌 -formData.append("_token", CSRF_TOKEN); 。
使用success 事件检查返回响应并添加下载链接。
如果response.status == 0 ，则使用alert() 显示错误信息，否则，通过创建锚标签显示下载链接，并将href 设置为response.link 。

完成代码

<!DOCTYPE html>
<html>
<head>
      <title>How to Add Download link in Dropzone - Laravel 8</title>

      <!-- Meta -->
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta charset="utf-8">
      <meta name="csrf-token" content="{{ csrf_token() }}">

      <!-- CSS -->
     <link rel="stylesheet" type="text/css" href="{{asset('dropzone/dist/min/dropzone.min.css')}}">

      <!-- JS -->
      <script src="{{asset('dropzone/dist/min/dropzone.min.js')}}" type="text/javascript"></script>

</head>
<body>

       <div class='content'>
              <!-- Dropzone -->
             <form action="{{route('uploadFile')}}" class='dropzone' ></form> 
       </div>

       <!-- Script -->
       <script>
       var CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').getAttribute("content");

       Dropzone.autoDiscover = false;
       var myDropzone = new Dropzone(".dropzone",{ 
            maxFilesize: 2, // 2 mb
            acceptedFiles: ".jpeg,.jpg,.png,.pdf",
       });
       myDropzone.on("sending", function(file, xhr, formData) {
            formData.append("_token", CSRF_TOKEN);
       }); 
       myDropzone.on("success", function(file, response) {

            if(response.success == 0){ // Error
                  alert(response.error);
            }else{
                  // Download link
                  var anchorEl = document.createElement('a');
                  anchorEl.setAttribute('href',response.link);
                  anchorEl.setAttribute('target','_blank');
                  anchorEl.innerHTML = "<br>Download";
                  file.previewTemplate.appendChild(anchorEl);
             }

       });
       </script>

</body>
</html>

5.输出

查看输出

6.总结

当文件被成功上传时，我使用锚元素添加了一个下载链接。从控制器中返回带有上传状态的文件路径。

如何在Dropzone中添加下载链接 - Laravel 8

内容

1.下 载

2.控 制器

3.路 线

4.查 看

5.输 出

6.总 结