【发布时间】：2017-07-28 02:40:07
【问题描述】：
我目前正在为网站制作个人资料图片功能，我开始使用 DropzoneJS，但在提交文件时遇到问题。图片会很好地落入该区域，但它上面会出现一个“X”，当我将鼠标悬停在图片上时，我可以看到MultiValueDictKeyError 错误。当我单击提交按钮而不选择文件时，我得到的错误是相同的。所以我认为问题是button 没有提交文件？我该怎么做？
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>
编辑
我将autoProcessQueue: false, 添加到myDropzone。当我将鼠标悬停在图片上时，我没有遇到问题。相反，现在当我按下提交时，它只会将我带到 MultiValueDictKeyError 错误页面
*编辑 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 消失了，并且个人资料图片没有改变。
【问题讨论】：
-
您的上传路径中是否有相同的文件（同名）？它不是导致那个错误吗？
-
@Jayground 不，没有，但这没关系，如果我决定这样做，它只会更改文件的名称。我正在做更多的研究并遇到了这个问题（stackoverflow.com/questions/5895588/…），所以我改变了看法，这似乎有所帮助。现在图片将进入放置区，当我将鼠标悬停在它上面时不会出现错误。这很好，但是现在当我按下提交个人资料图片时，dropzone 将消失，但个人资料图片不会更新，没有任何反应
-
@Jayground 请检查我的编辑
标签： javascript html django dropzone.js