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