Django：文件上传和保存使用 Ajax

Question

我不确定目录是否有问题，或者我的代码中是否存在某种常见错误，但我无法将上传的文件保存到文件夹，或者更具体地说，无法将媒体文件夹保存到很多地方的例子。

我只是获取一个文本字段和文件并使用 Ajax 将其保存在数据库中，它也可以工作，除了我选择的任何文件，即使我手动创建一个也不会保存在媒体文件夹中，也不是它也可以自己创建一个。 我可以在没有 Ajax 但没有它的情况下让它工作。 也许这与我如何通过 Ajax 发送和处理数据有关，但我已经通过大量论坛尝试修复它，但到目前为止没有结果。 我已经仔细检查了其他所有内容，例如 settings.py 配置和我导入的库，一切看起来都井井有条。 我在下面分享代码。

索引.html

<body>
<div class="container-fluid">
    <div class="col-md-4">
        <form id="data" enctype="multipart/form-data">
            <label for="docn">
                <input type="text" id="docn" placeholder="Please enter document name">
            </label>

            <label for="docc">
                <input type="file" id="doc" name="docu">
            </label>

            <button type="button" onclick="enterdata()">Submit</button>

        </form>
    </div>
</div>
<script>
    function enterdata() {
        var token = '{{ csrf_token }}';
        alert('csrf generated');

        $.ajax({
            type: 'POST',
            url: '/user',
            data: {
                dcn: $('#docn').val(),
                dc: $('#doc').val(),
            },
            headers: {'X-CSRFToken': token},
            success: function () {
                alert("Added");
            }
        })

    }
</script>
</body>

视图.py

from django.shortcuts import render
from django.http import HttpResponse
from fileup.models import *
from django.core.files.storage import FileSystemStorage

def insert(request):
    return render(request, 'index.html')

def testing_data(request):
    if request.method == 'POST':
        dcn1 = request.POST['dcn']
        dc = request.POST['dc']

        request_file = request.FILES['docu'] if 'docu' in request.FILES else None
        if request_file:
            fs = FileSystemStorage()
            file = fs.save(request_file.name, request_file)
            fileurl = fs.url(file)

        FileDB.objects.create(
            docname=dcn1,
            doc=dc,
        )

        return HttpResponse('')

网址.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', insert),
    path('user', testing_data),
]
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

模型.py

from django.db import models

class FileDB(models.Model):
    docname = models.CharField(max_length=255)
    doc = models.FileField()

settings.py 配置

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

这就是完整的项目。 最终目标是将路径和文件名保存在数据库中，并将所选文件上传到媒体文件夹中。 前者正在完成，但后者没有积极成果。

谢谢你。

Answer 1

您说除了文件的存储位置外一切正常。 无论您的 MEDIA_ROOT 设置是什么，以下代码都会将上传的文件存储在 /media/photos 下：

from django.core.files.storage import FileSystemStorage
from django.db import models

fs = FileSystemStorage(location='/media/photos')

class Car(models.Model):
    ...
    photo = models.ImageField(storage=fs)

希望这可以帮助你。 由 Django 提供文档： https://docs.djangoproject.com/en/3.1/topics/files/

Answer 2

您的做法不对，您应该在 Ajax 调用中提供 FormData。 见下文：

function upload(event) {
event.preventDefault();
var data = new FormData($('form').get(0));

$.ajax({
    url: 'user/',
    type: 'POST,
    data: data,
    cache: false,
    processData: false,
    contentType: false,
    success: function(data) {
        alert('success');
    }
});
return false;
}

$(function() {
    $('form').submit(upload);
});

在您看来，您应该从 request.FILE 获取文件，如下所示：

def testing_data(request):
    if request.method == 'POST':
        form = FileUploadForm(data=request.POST, files=request.FILES)
        if form.is_valid():
            print 'valid form'
        else:
            print 'invalid form'
            print form.errors
    return HttpResponseRedirect('/')

Answer 3

我终于成功了。 在此处为遇到此问题的其他人共享代码。

索引.html

<body>
<div class="container-fluid">
    <div class="col-md-4">
        <form id="data">
            <label for="docn">
                <input type="text" id="docn" placeholder="Please enter document name">
            </label>

            <label for="docc">
                <input type="file" id="doc" name="docu">
            </label>

            <button type="button" onclick="enterdata()">Submit</button>

        </form>
    </div>
</div>
<script>
    function enterdata() {

        var data1 = new FormData()
        data1.append('dcn', $('#docn').val())
        data1.append('dc', $('#doc').val())
        data1.append('docf', $('#doc')[0].files[0])

        var token = '{{ csrf_token }}';
        alert('csrf generated');

        $.ajax({
            type: 'POST',
            url: '/user',
            data: data1,
            processData: false,
            contentType: false,
            headers: {'X-CSRFToken': token},
            success: function () {
                alert("Added");
            }
        })

    }
</script>
</body>

视图.py

from django.shortcuts import render
from django.http import HttpResponse, HttpResponseRedirect
from fileup.models import *
from django.core.files.storage import FileSystemStorage


def insert(request):
    return render(request, 'index.html')


def testing_data(request):
    if request.method == 'POST':
        dcn1 = request.POST['dcn']
        dc = request.POST['dc']

        upload_file = request.FILES['docf']
        fs = FileSystemStorage()
        fs.save(upload_file.name, upload_file)


        FileDB.objects.create(
            docname=dcn1,
            doc=dc,
        )

        return HttpResponse('')

网址.py

from django.contrib import admin
from django.urls import path
from fileup.views import *
from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', insert),
    path('user', testing_data),
]
if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

settings.py 配置

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

现在，媒体目录在文件上传时创建，文件被保存在其中。

Django：文件上传和保存使用 Ajax

问题描述

3 个解决方案

解决方案1
1 2020-12-02 14:40:12

解决方案2
0 2020-12-02 09:39:03

解决方案3
0 已采纳 2020-12-04 06:36:26

Django：文件上传和保存使用 Ajax

问题描述

3 个解决方案

解决方案1 1 2020-12-02 14:40:12

解决方案2 0 2020-12-02 09:39:03

解决方案3 0 已采纳 2020-12-04 06:36:26

解决方案1
1 2020-12-02 14:40:12

解决方案2
0 2020-12-02 09:39:03

解决方案3
0 已采纳 2020-12-04 06:36:26