Question

我在Laravel应用程序中使用Dropzone。在Dropzone中，我可以限制一次上传的最大文件数。但是，刷新页面后，用户可以上传更多照片。

Dropzone.options.addPhotosForm = {
  maxFiles: 5,
};

我可以通过计算此用户已为此页面上传的照片数量，然后将类更改为display：none;来删除前端的此功能。并发出以下警告：

<div class="@if(count($rooms->photos) >= 10) d-none @endif">
  <form action="{{ route('myroute', [$rooms->slug]) }}" method="POST" class="dropzone" id="addPhotosForm">
    {{ csrf_field() }}
  </form>
</div>
<div class="@if(count($rooms->photos) < 10) d-none @endif">
  <p>You have uploaded {{ count($rooms->photos)}} photos. This is too many.</p>
</div>

这里的问题是，如果用户上传了9张照片，他们就可以再上传5张照片并获得总共14张而不是10张照片，这是所需的最大值。此外，如果用户是恶意的，他们只需转到Inspect Elements，删除display：none;风格并上传尽可能多的照片。

我想禁用用户在Javascript中上传更多照片的功能，而我正在尝试使用Laravel的Blade来执行此操作，但存在一些问题。

所以，我有几个问题：

1）我可以在Javascript中使用Blade吗？

我试过这个，例如使用：

 var count = count($rooms->photos);

然后我得到错误，

未捕获的SyntaxError：意外的令牌＆gt;

如果我能让这个工作，我的想法是在Dropzone选项中做到这一点。

init: function(file) {
  if (count >= 10){
      myDropzone.removeFile(file);
  };

2）是否有更好的方法将所有上传内容限制为Dropzone？
我在这里尝试了一些建议而没有运气。

谢谢！

布拉德

编辑：解决方案

感谢@Lukas和@Miguel Cabrera的快速回复！

我已根据您的输入采用了解决方案。

<script type="text/javascript">
  var count = {{ count($rooms->photos) }};
  var maxFiles = 10 - {{ count($rooms->photos) }};
</script>

 <script type="text/javascript">
   Dropzone.options.addPhotosForm = {
    maxFiles: maxFiles,
   }
 </script>

这完美无缺。再次感谢！！ :)

Answer 1

＆gt;我可以在Javascript中使用Blade吗？

假设$ rooms-＆gt;照片是数组或正在实现Countable界面，以下是使用刀片将照片计数传递给javascript的方法：

<script type="text/javascript">
  var count = {{ count($rooms->photos) }};
</script>

2）是否有更好的方法将所有上传内容限制为Dropzone？

我认为你的解决方案很好。请记住有太多文件上传的后端保护。

Answer 2

在刀片上执行此操作非常困难，无论哪种方式，您都必须将数据保存到某种形式的数据库中。

我会说你必须首先将上传传递给你的API，然后你必须向用户添加一个字段，记录用户在dropzone中上传的数量。然后，在它到达dropzone API之前，您将成功或失败API请求。

class DropZoneController extends Controller {


    public function testAndUploadFile($user_id, Request $request)
    {

        $numUploads = DB::table('profile')
        ->select('dZUploads')
        ->where('user_id', '=', $user_id)
        ->get();

        if($numUploads >= 5){
            return response('Too Many Uploads', 412);
        } 

        else 
        {

        $numUploads += 1;
        $rows = DB::table('profile')
        ->where('user_id', '=', $user_id)
        ->update(['dZUploads' => $numUploads]);

        if(collect($rows)->isEmpty()){
            return response('Not Found', 404);
        } else {
            return response('Success', 200);
        }
    }
}

然后成功时，您将发送文件上传请求。您可以选择从JavaScript或Laravel发送它。我只是发送Laravel的请求。

这将向您展示如何使用Guzzle从您的API发送http请求。 https://stackoverflow.com/a/28281787/5231528

在带有Dropzone的Javascript中使用Laravel Blade - ＆gt;上传的文件总数

2 个答案: