python - 请求.FILES 为空

Question

我有一个带有 <input type="file"> 的表单用于选择要上传的图像，一旦单击上传按钮，就会发送一个 POST XMLHttpRequest，该请求调用 upload_view这应该将图像保存在服务器上。然而，我的request.FILES由于某种原因是空的。当我 console.log(document.getElementById('fileToUpload').files我可以看到那里的文件。还有我的request.POST看起来像这样:

<QueryDict: {'fileToUpload': ['[object FileList]'], 'csrfmiddlewaretoken': ['bOjUFzTnMVbHOWOQURj2egJuRizsVJIBMSfQra4yuz7MX3DOEaRPHbMVnY8xyIsU']}>

我的看法:

def upload_view(request):
    key = f'{request.user}-{datetime.datetime.now().strftime("%Y%m%d%H%M%S")}'
    for file in request.FILES.getlist('fileToUpload'):
        TemporaryImage.objects.create(image=file, key=key)
    return HttpResponse('complete')

我的JS:

function uploadFile() {
  var fd = new FormData();
  fd.append("fileToUpload", document.getElementById('fileToUpload').files);

  var value = [];
  document.getElementsByName('csrfmiddlewaretoken').forEach(function(x) {
      value.push(x.value);
  })

  fd.append('csrfmiddlewaretoken', value[0]);

  var xhr = new XMLHttpRequest();

  xhr.open("POST", Urls['upload-view']());
  xhr.send(fd);
}

我的表格:

<form id="form1" enctype="multipart/form-data" method="post">
    {% csrf_token %}
    <label for="fileToUpload">Select a File to Upload</label>
    <input type="file" multiple="multiple" name="fileToUpload" id="fileToUpload">
    <input type="button" onclick="uploadFile()" value="Upload">
</form>

Answer 1

您需要单独附加每个文件。

var fd = new FormData();
var files = document.getElementById('fileToUpload').files;
for (var x=0; x < files.length; x++) {
    fd.append("fileToUpload", files[x]);
}