【发布时间】：2020-04-21 00:48:33
【问题描述】：
我正在尝试执行文件上传。我使用 Angularjs 作为前端，使用 Django 作为后端。如我的日志所示，我能够成功上传文件。但是，当文件数据传递给Django时，我不知道为什么表单无效。这是我的错误信息：
There's a mistake in field 'file': <ul class="errorlist"><li>This field is required.</li></ul>
我的 JSON 消息：
<JsonResponse status_code=200, "application/json">
请求负载： content-disposition
html:
<body ng-app="myApp" ng-controller="appCtrl">
<input type="file" id="file" name="files" accept="text/*"
data-url="file" class="inputfile_upload" select-ng-files
ng-model="uploadedFile"/>
<label for="file"> <span id="chooseFile"></span>Upload a file!</label>
<button id="submitBtn" type="submit" ng-click="upload()">Upload</button>
</body>
controller.js：
var app = angular.module('myApp', [])
app.controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){
$scope.upload = function() {
var file = $scope.uploadedFile;
console.log('file is ' );
console.dir(file);
var uploadUrl = "/uploaded_file";
fileUploadService.uploadFileToUrl(file, uploadUrl);
};
}
service.js：
app.factory('fileUploadService', function ($rootScope, $http) {
var service = {};
service.uploadFileToUrl = function upload(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).then(function successCallback(response){
console.log("Files added");
}, function errorCallback(response){
console.log("Files not successfully added");
})
}
return service;
});
directives.js：
app.directive("selectNgFiles", function($parse) {
return {
require: "ngModel",
link: function postLink(scope,elem,attrs,ngModel) {
elem.on("change", function(e) {
var files = elem[0].files;
ngModel.$setViewValue(files);
})
}
}
});
views.py：
@csrf_exempt
def uploadFile(request):
try:
if request.method == 'POST':
# When files are submitted to the server, the file data ends up placed in request.FILES.
form = UploadFileForm(request.POST, request.FILES)
for error_field in form.errors:
print("There's a mistake in field '{field}': {problem}".format(
field=error_field,
problem=form.errors[error_field]
))
if form.is_valid():
# file is saved
form.save()
data = request.FILES['file'].read();
print(data);
messages.success(request, 'File uploaded successfully!', extra_tags='alert')
return JsonResponse({"status": "success", "message": "Success"})
else:
print(JsonResponse({"status": "error", "message": form.errors}))
return JsonResponse({"status": "error", "message": form.errors})
else:
form = UploadFileForm()
return render(request, uploadFile(), {'form': form})
except Exception as e:
return JsonResponse({"error": str(e)}, status=500)
模型.py：
class UploadFile(models.Model):
file = models.FileField(null=True)
def __unicode__(self):
return self.file
form.py
class UploadFileForm(ModelForm):
class Meta:
model = UploadFile
fields = '__all__'
【问题讨论】：
-
您没有使用表单。在模板中使用 UploadFileForm。
-
不清楚文件是如何从浏览器上传的。您可能需要检查浏览器开发人员工具（网络选项卡）以查看您的请求并检查文件是否已上传。或者你需要告诉我们这个
upload()javascript 函数到底在做什么。并在视图中设置断点并检查request.POST和request.FILES值。 -
我注意到的一件事是您的
<input>具有name属性files而不是file。但是由于您没有<form>，而且我不知道upload()做了什么，所以很难说这是否是问题所在。 -
@sandeep 我在视图中调用了
form = UploadFileForm(request.POST, request.FILES)。你是这个意思吗？ -
@dirkgroten 我的上传功能基本上只是将文件传递给 django，因为某些操作是由 django 完成的。你想让我上传上传功能的代码吗？
标签： django django-models django-rest-framework django-forms django-file-upload