Python Django AngularJs dropzone 多个上传文件 爬坑

最近 使用了 dropzone 的 多个 文件 上传的功能 ,参考网站上的说明并没有很快实现,并且网站的后台是 使用 Java 写的,我需要使用的python ,所以总结教程中的几个 问题:

1.dropzone.js 下载地址
2.dropzone 参考网站地址

3.出现的问题 :
3.1 报错信息 :$scope.processQueue is not a function
解决方式:$scope.processQueue();函数 写错了,应该是processDropzone 可以在后面对应的函数发现 processDropzone是 调用了 processQueue()函数 所以肯定是名称写错了

/* js/fileAppControllers.js */

            ...

            fileAppControllers.controller('FileCtrl', ['scope',
                function ($scope) {

                    $scope.partialDownloadLink = 'http://localhost:8080/download?filename=';
                    $scope.filename = '';

                    $scope.uploadFile = function() {
                        $scope.processQueue();
                    };

                    $scope.reset = function() {
                        $scope.resetDropzone();
                    };
                }

            ]);

3.2 报错情况:demo中是可以实现多个文件上传的,但是把网站上js复制下来,发现最后只能是上传最后一个
原因是 : js 文件中多加个函数:if 函数中表示如果上传的第二个文件存在files[1]!=null就会删除之前所有的文件,只剩下最后一个!
解决方式:删除If语句既可以

var eventHandlers = { 'addedfile': function(file) {
    scope.file = file;
     if (this.files[1]!=null) {     this.removeFile(this.files[0]);
     }
 scope.$apply(function() {
    scope.fileAdded = true;
                 );
    },
'success': function (file, response) {   }
                             };

3.4 js 中 dropzone 报错信息 :dropzone is undefined
原因是 在 js 中 定义一个 新的变量 dropzone 前面需要加上 var
解决方式 :var dropzone = new Dropzone(element[0], config);
ps :这个问题 我查出来花了三个小时,新手爬坑真的是好惨

3.5 报错情况:ontroller 'carousel', required by directive 'ngTransclude', can't be found
原因是 : 未知 还需要回来补充这一段

3.6 后台python实现:
报错情况:the server responded with a status of 405 (Method Not Allowed)表示使用的方法是不正确的,DropZone 默认使用的post的方式传数据
解决方式是后台使用post接收,我用的是Viewset中的 APIView,本来我用的是 get方法,后来改成了 post,因为是 多个文件上传所以request.FILES.iteritems():类型是 dict,需要使用 循环得到每一个 文件,代码如下

class PropertyUploadFileInteractiveView(APIView):
    def post(self, request, *args, **kw):
        property_id = request.GET['property_id']
        for key, value in request.FILES.iteritems():



返回的是response  
            op_result = 'success'
                    result ={'result':op_result}
                    response = Response(result, status=status.HTTP_200_OK)
                    #return response
                    #return HttpResponseRedirect("/ui-property/property_detail/%s" % property_id) 
                else:
                    op_result = 'fail'
                    result ={'result':op_result}
                    response = Response(result, status=status.HTTP_200_OK)
            。。。。。

中文版config的参考

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Django中使用Dropzone进行批量文件上传,您可以按照以下步骤进行操作: 1. 首先,按照之前提到的步骤安装和配置Dropzone插件。 2. 在您的HTML模板文件中,添加一个表单元素,并设置Dropzone的容器元素。确保将`enctype="multipart/form-data"`添加到表单元素中,以便支持文件上传。 ```html <form action="{% url 'upload' %}" method="post" class="dropzone" id="myDropzone" enctype="multipart/form-data"> {% csrf_token %} </form> ``` 3. 在JavaScript部分,初始化Dropzone并配置一些选项。您可以为Dropzone指定`autoProcessQueue: false`选项,以便控制何时手动处理文件队列。 ```html <script> var myDropzone = new Dropzone("#myDropzone", { autoProcessQueue: false, }); // 手动处理文件队列 var submitButton = document.querySelector("#submit-button"); submitButton.addEventListener("click", function() { myDropzone.processQueue(); }); </script> ``` 4. 在您的Django项目中,创建一个视图函数来处理文件上传请求。在这个视图函数中,您需要使用`request.FILES.getlist('file')`方法来获取上传的文件列表。 ```python from django.shortcuts import render def upload(request): if request.method == 'POST': uploaded_files = request.FILES.getlist('file') # 获取上传的文件列表 for file in uploaded_files: # 处理每个上传的文件,例如保存到服务器或其他操作 return render(request, 'upload_success.html') return render(request, 'upload.html') ``` 在这个示例中,我们使用了`getlist()`方法来获取文件列表,然后可以遍历每个文件进行处理。 5. 创建一个名为`upload_success.html`的HTML模板文件,用于显示文件上传成功的页面。 这样,您就可以在Django中使用Dropzone进行批量文件上传了。您可以根据自己的需求进行进一步的定制和扩展。希望对您有所帮助!如果您有任何问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值