Как получить доступ к файлам изображений, отправленным с помощью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
}
);
}