在Django中使用DropzoneJS时出现MultiValueDictKeyError [英] MultiValueDictKeyError when using DropzoneJS with Django
问题描述
我目前正在为网站制作个人资料图片功能，我开始使用DropzoneJS，但我在提交文件时遇到问题。图片会掉入区域，但它会出现一个X字样，当我将鼠标悬停在图片上时，可以看到 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.files [1]！= null）{
this.removeFile（this.files [0 ]）;
}
}）;
}
};
Dropzone.options.myAwesomeDropzone = {
accept：function（file，done）{
console.log（uploaded）;
$ b $，
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 =picModalclass =modal>
<！ - 模态内容 - >
< div class =modal-content>
< span class =close>< / span>
< form action ={％url'profile_test'％}method ='POST'enctype =multipart / form-dataclass =dropzoneid =my-dropzone> {％csrf_token ％}
< button id ='submitBtn'type ='submit'style ='visibility：hidden;'>提交< /按钮>
< input id ='submit-all'type ='file'name ='uploaded_image'/>
{{form}}
< / form>
< / div>
< / div>
< / body>
编辑
我加入了 autoProcessQueue：false，到 myDropzone 。当我将鼠标悬停在图片上时，我没有收到问题。相反，现在当我按提交它只是带我到 MultiValueDictKeyError 错误页面
*编辑2 ** p>
views.py
def profile_test（请求）：
＃使用此视图显示配置文件页面，并测试其变化
form = ImageUploadForm（request.POST，request.FILES）
user = User.objects.get（id = request.user.id）
如果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消失并且配置文件图片不会改变。
我期望img属性是FileField。
$ b
user.userprofile.img = request.POST.get（'uploaded_image'，False）
code> 请试试这个。
user.userprofile.img = request.FILES.get（'uploaded_image'）
＃如果您有多个文件要上传
user.userprofile.img = request.FILES.getlist（'uploaded_image'）
I'm currently making a profile picture feature for a website, I started using DropzoneJS but I'm having an issue submitting the file. The picture will drop into the zone fine, but it appears with an "X" over it, and when I hover over the picture I can see the MultiValueDictKeyError error. Which is the same error I get when I click the submit button without selecting a file. So I assume the issue is that the file isn't being submitted by the button? How do I do that?
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>
EDIT
I added autoProcessQueue: false, to myDropzone. I'm not getting the issue when I hover over the picture anymore. Instead now when I press submit it just takes me to the MultiValueDictKeyError error page
*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'})
I used to have user.userprofile.img = request.FILES["uploaded_image"] but changed it, it seemed to maek things better. Now the image will drop into the zone, and when I hover over it I won't see that error. But now when I submit it the dropzone disappears and the profile pic doesnt change.
I expect that img attribute is FileField. right?
user.userprofile.img = request.POST.get('uploaded_image', False)
please try this.
user.userprofile.img = request.FILES.get('uploaded_image')
# if you have multiple files to upload
user.userprofile.img = request.FILES.getlist('uploaded_image')
这篇关于在Django中使用DropzoneJS时出现MultiValueDictKeyError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
