繁体   English   中英

AngularJS + Django文件上传

[英]AngularJS + Django file upload

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

的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:

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:

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 }
    })
    }
}
}

}

指令.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:

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

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

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})
  1. 如果我的程序返回UploadFileDataView.as_view(),我应该用upload.html替换什么? 2.如果我要尝试:

    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: messages.error(request, 'Error! Your file is not uploaded successfully!', extra_tags='alert') else: form = UploadFile() return render(request, 'upload.html', {'form': form}) 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: messages.error(request, 'Error! Your file is not uploaded successfully!', extra_tags='alert') else: form = UploadFile() return render(request, 'upload.html', {'form': form}) else语句中将出现“意外缩进”错误。 为什么?

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'])])

抱歉,我是AngularJS + Django的新手,所以我们将不胜感激。 谢谢!

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM