python - angularjs fileupload无法上传(angularjs fileupload unable to upload)

Question

I am referring to the official Django documentation https://docs.djangoproject.com/en/2.2/topics/http/file-uploads/ on Handling uploaded files with a model, as well as 'ngFileUpload' and Django Rest Framework on Stack Overflow.

(我指的是官方的Django文档https://docs.djangoproject.com/en/2.2/topics/http/file-uploads/关于使用模型处理上传的文件，以及“ ngFileUpload”和Django Rest Framework on Stack溢出。)

However, I am still unable to upload a file.

(但是，我仍然无法上传文件。)

html:

(的HTML：)

<div id="dropdown-lvl5" class="panel-collapse collapse" ng-submit="UploadFile">
  <div class="panel-body" style="width:198px">
       <input type="file" id="files" name="files[]" multiple size="10" 
              class="inputfile_upload" file="file" files-model="file.file"
              ng-controller="fileUploadController"
              accept="application/pdf" />
      <label for="files"> <span class="glyphicon glyphicon-open"></span>Select a file to upload</label>
      <div>
          <span ng-show="!files.length">No files selected</span>
          <ul>
              <li ng-repeat="file in files">{{file.file}}</li>
          </ul>
      </div>
  </div>
</div>

fileUploadController.js:

(fileUploadController.js：)

app.controller('fileUploadController', function($scope, Upload, $timeout){

    $scope.Submit = function(file){
       $file.upload = Upload.upload({
      url: '../../file',
      data: {file: file},
      arrayKey: '',
    });

    file.upload.then(function (response) {
      $timeout(function () {
        file.result = response.data;
      });
    }, function (response) {
      if (response.status > 0)
        $scope.errorMsg = response.status + ': ' + response.data;
      }
    }
});

fileUploadService.js: (fileUploadService.js：)

app.service('fileUploadService', ['$http', function ($http) {
    this.post = function(uploadUrl, data){
        var fd = new FormData();
        fd.append('file', file);
        for(var key in data)
            fd.append(key, data[key]);
        $http.post(uploadUrl,fd, {
            transformRequest: angular.identity,
            headers: { 'Content-Type': undefined }
        })
    }
}
}
}

directive.js: (指令.js：)

app.directive('fileModel', ['$parse',function ($parse) {
    return{
        scope: {
            file: '='
        },
        restrict: 'A',
        link: function(scope, element, attrs){
            var model = $parse(attrs.fileModel)
            var modelSetter = model.assign;

            element.bind('change', function(){
                var file = event.target.files[0];
                scope.file = file ? file : undefined;
                scope.$apply();
            })
        }
    }
}])

url.py:

(url.py：)

urlpatterns = [
    path('uploadFile/',UploadFileDataView.as_view())
]

Settings.py:

(Settings.py：)

MEDIA_ROOT = os.path.join(BASE_DIR, 'uploaded_file')
MEDIA_URL = '/media/'

views.py:

(views.py：)

def uploadFile(request):
if request.method == 'POST':
    # When files are submitted to the server, the file data ends up placed in request.FILES.
    form = UploadFile(request.POST, request.FILES)
    if form.is_valid():
        # file is saved
        form.save()
        messages.success(request, 'Your file has been uploaded successfully!', extra_tags='alert')
else:
    form = UploadFile()
return render(request, 'upload.html', {'form': form})

model.py:

(model.py：)

class UploadFile(models.Model):
file = models.FileField(upload_to="../file" ,null= True, blank=True)
title = models.CharField(max_length=10)
file = models.FileField('Uploaded File', validators=[FileExtensionValidator(['pdf'])])

I believe there is something wrong with the angular side because regardless of what files I've uploaded, it always shows "No files selected".

(我相信倾斜的一面有问题，因为无论我上传了什么文件，它始终显示“未选择文件”。)

Sorry, I'm new to AngularJS + Django, so any help would be appreciated.

(抱歉，我是AngularJS + Django的新手，所以我们将不胜感激。)

Thank you!

(谢谢！)

  ask by user3774763 translate from so

Answer 1

等待大神答复