Как получить доступ к файлам изображений, отправленным с помощьюajax, в бэкенде django с помощью

У меня проблема с отправкой файлов из ajax в django. Я собираю шаблонную форму с помощью new formData() и добавляю в нее дополнительные данные, затем пытаюсь отправить с помощью ajax. При отправке я распечатываю отправленные данные в веб-консоли и четко вижу ключи, соответствующие словарю, содержащему имена выбранных изображений (изображения собраны в форме с помощью тега input), а также вижу другие строковые данные, но когда дело доходит до конца django, я печатаю json.loads(request.body) и вижу только строковые данные, а ключи, которые соответствовали изображениям, теперь являются пустыми словарями. А также request.FILES пуст.

js код

function accept(formdata){
    
    const data1=Object.fromEntries(formdata.entries());
    console.log(data1);//prints all content and i see image names in it
    $.ajax(
        {type:'POST',
        url:document.getElementById('url').getAttribute('data-url'),
        data:JSON.stringify({"formdata":data1}),
        headers:{
            "X-Requested-With":"XMLHttpRequest",
            "X-CSRFToken":getCookie("csrftoken"),
        },
        success:(data) =>{
            console.log('data');
        },
        dataType:'json',
        contentType:false,
        processData:false
    }
    );
}

function set_table(event){
    event.preventDefault();
    const table = document.getElementById('tb');
    const list=table.children;
    console.log(list.length);
    let arr=[];
    for (let row =0; row<list.length;row++ ){
        let rows=list[row];
        if (rows.getAttribute('name') !='head'){
            let data={
                "agent":rows.querySelector('#personnel').value,
                "number":rows.querySelector('#number').value ,
                "work":rows.querySelector('#for').value
            };
            arr.push(JSON.stringify(data));
        }
        
    }
    //console.log(event.target.data);
    const formdata=new FormData(event.target);
    formdata.append('tab',arr);
    accept(formdata);
    
}

просмотров джанго

def project_creation_page(request):
    context={"cat":project_cat}
    is_ajax = request.headers.get('X-Requested-With') == 'XMLHttpRequest'
    if is_ajax:
        print(34)
        if request.method=='POST':
            data=json.loads(request.body)
            print(data)
            for file ,files in request.FILES:
                print(file, files.name)#nothing is printed
    return render(request,"Projectscreation.html",context)

Данные выводятся в веб-консоль

{csrfmiddlewaretoken: 'g74kJdKBuemLDoIkkEzkZJ6T4b7EAAzBzMgaKn6qhcD224xHlyrhVJaYTGC552gy', title: 'all for one', cathegorie: 'Projet web', probleme: 'one for all', pb_image: File, …}
cathegorie
: 
"Projet web"
csrfmiddlewaretoken
: 
"g74kJdKBuemLDoIkkEzkZJ6T4b7EAAzBzMgaKn6qhcD224xHlyrhVJaYTGC552gy"
description
: 
"bankai"
ds_image
: 
File {name: '', lastModified: 1728416012252, lastModifiedDate: Tue Oct 08 2024 20:33:32 GMT+0100 (West Africa Standard Time), webkitRelativePath: '', size: 0, …}
pb_image
: 
File {***name: '1718940148812.jpg'***, lastModified: 1718940577000, lastModifiedDate: Fri Jun 21 2024 04:29:37 GMT+0100 (West Africa Standard Time), webkitRelativePath: '', size: 10404, …}
probleme
: 
"one for all"
services
: 
"tensa zangetsu"
sv_image
: 
File {name: '', lastModified: 1728416012253, lastModifiedDate: Tue Oct 08 2024 20:33:32 GMT+0100 (West Africa Standard Time), webkitRelativePath: '', size: 0, …}
tab
: 
"{\"agent\":\"dfdsf\",\"number\":\"cv\",\"work\":\"csdvfds\"}"
title
: 
"all for one"

pb_image содержит изображение вы заметите эту строку:

pb_image
: 
File {***name: '1718940148812.jpg'***, lastModified: 1718940577000, lastModifiedDate: Fri Jun 21 2024 04:29:37 GMT+0100 (West Africa Standard Time), webkitRelativePath: '', size: 10404, …}

Данные выведены в терминал. pb_image теперь пустой словарь

{'formdata': {'csrfmiddlewaretoken': 'g74kJdKBuemLDoIkkEzkZJ6T4b7EAAzBzMgaKn6qhcD224xHlyrhVJaYTGC552gy', 'title': 'all for one', 'cathegorie': 'Projet web', 'probleme': 'one for all', 'pb_image': {}, 'description': 'bankai', 'ds_image': {}, 'services': 'tensa zangetsu', 'sv_image': {}, 'tab': '{"agent":"dfdsf","number":"cv","work":"csdvfds"}'}}

Пожалуйста, любая помощь будет очень признательна. Если вы считаете, что какой-либо необходимой информации не хватает, пожалуйста, дайте мне знать, чтобы я мог добавить ее

Я нашел решение. Проблема заключалась в том, что из моего кода ajax я должен был привести его к следующему виду

function accept(formdata){
    
    const data1=Object.fromEntries(formdata.entries());
    console.log(data1);
    $.ajax(
        {type:'POST',
        url:document.getElementById('url').getAttribute('data-url'),
        data:formdata,//this line changed
        headers:{
            "X-Requested-With":"XMLHttpRequest",
            "X-CSRFToken":getCookie("csrftoken"),
        },
        success:(data) =>{
            console.log('data');
        },
        dataType:'json',
        processData:false,
        contentType:false
        
    }
    );
}
Вернуться на верх