2017-07-28 60 views
1

我目前正在为一个网站制作个人资料图片功能,我开始使用DropzoneJS,但我在提交文件时遇到问题。图片将落入该区域,但会出现一个“X”字样,当我将鼠标悬停在图片上时,可以看到MultiValueDictKeyError错误。当我单击提交按钮而没有选择文件时,会出现同样的错误。所以我认为问题在于该文件没有被button提交?我怎么做?与Django一起使用DropzoneJS时的MultiValueDictKeyError

HTML/JS:

<script type='text/javascript'> 

Dropzone.options.myDropzone = { 

    init : function() { 
     var submitButton = document.querySelector("#submitBtn") 
     myDropzone = this; 
     submitButton.addEventListener("click", function() { 
      myDropzone.processQueue(); 
     }); 
     this.on("addedfile", function() { 
      document.getElementById('submitBtn').style.visibility = "visible"; 
     }); 

     this.on('addedfile', function(){ 
      if (this.files[1]!=null){ 
       this.removeFile(this.files[0]); 
      } 
     }); 


    } 
}; 

Dropzone.options.myAwesomeDropzone = { 
    accept: function(file, done) { 
    console.log("uploaded"); 

    }, 
    init: function() { 
    this.on("addedfile", function() { 
     if (this.files[1]!=null){ 
     this.removeFile(this.files[0]); 
     //document.getElementById('submitBtn').style.visibility = "visible"; 
     } 
    }); 
    } 


}; 
</script> 
<!-- Modal --> 
<div id="picModal" class="modal"> 

    <!-- Modal content --> 
    <div class="modal-content"> 
    <span class="close"></span> 
    <form action="{% url 'profile_test' %}" method='POST' enctype="multipart/form-data" class="dropzone" id="my-dropzone">{% csrf_token %} 
     <button id='submitBtn' type='submit' style='visibility: hidden;'> Submit </button> 
     <input id='submit-all' type='file' name='uploaded_image'/> 
      {{form}} 
    </form> 
    </div> 

</div> 

</body> 

Here's a screenshot of the error

EDIT

我添加autoProcessQueue: false,myDropzone。当我将鼠标悬停在图片上时,我没有收到问题。相反,现在当我按下提交它只是带我到MultiValueDictKeyError错误页面

* EDIT 2 **

views.py 

def profile_test(request): 
    #going to use this view to display the profile page, and test alterations to it 
    form = ImageUploadForm(request.POST, request.FILES) 
    user = User.objects.get(id=request.user.id) 
    if request.method == "POST": 
     print 'valid' 
     user.userprofile.img = request.POST.get('uploaded_image', False) 
     user.userprofile.save() 
     return HttpResponseRedirect(reverse("profile_test")) 
    else: 
     print 'invalid' 
     form = ImageUploadForm() 

    return render(request, 'profile_test.html', {form:'form', user: 'user'}) 

我曾经有user.userprofile.img = request.FILES["uploaded_image"]但改变了它,它似乎陌事情做得更好。现在图像将落入该区域,当我将鼠标悬停在该区域上时,我不会看到该错误。但现在,当我提交它dropzone消失和个人资料图片不会改变。

+1

上传路径中是否有相同的文件(同名)?它没有导致这个错误? – Jayground

+0

@Jayground不,没有,但那不重要,它只是改变文件的名称,如果我决定这样做。我正在做更多的研究,并且遇到了这个问题(https://stackoverflow.com/questions/5895588/django-multivaluedictkeyerror-error-how-do-i-deal-with-it),所以我改变了我的观点,它似乎帮助。现在图片会进入dropzone,当我将鼠标悬停在图片上时不会出现错误。这是好的,但现在当我按提交配置文件图片的dropzone将消失,但配置文件图片不会更新,没有任何反应 – Amon

+0

@Jayground请检查我的编辑 – Amon

回答

1

我期望img属性是FileField。对?

user.userprofile.img = request.POST.get('uploaded_image', False) 

请试试这个。

user.userprofile.img = request.FILES.get('uploaded_image') 
# if you have multiple files to upload 
user.userprofile.img = request.FILES.getlist('uploaded_image') 
+0

这是一个'ImageField',不知道这是否有所作为 – Amon

+0

Omg it工作!我实际上尝试了你的建议,但只是增加了“假”的论点。哪个返回了'AttributeError:'bool'对象没有属性'instance''我很愚蠢,显然它指的是'False'参数。我应该进一步阅读它。谢谢soooo很多人,你很棒 – Amon

+1

我很高兴听到它有帮助。 :) – Jayground