带有Django的Javascript XMLHttpRequest
我正试图用带有Django的Javascript XMLHttpRequest,javascript,python,django,django-models,xmlhttprequest,Javascript,Python,Django,Django Models,Xmlhttprequest,我正试图用fetch将一些照片用React JS发送到Django。然后我想用Django将这些照片保存到数据库中 处理发送照片的React JS功能如下： handleAdd(e){ e.preventDefault(); let data = this.state.data; let pictures = this.state.pictures; let body = new FormData(); body.
fetchReact JSDjangoReact JShandleAdd(e){
e.preventDefault();
let data = this.state.data;
let pictures = this.state.pictures;
let body = new FormData();
body.append('data', JSON.stringify(data));
if (pictures.length > 0){
_.each(pictures, (picture, i) => {
body.append('pictures', picture);
});
}
let xhr = new XMLHttpRequest();
xhr.open('POST', `http://localhost:8000/master/api/add-inspection/`);
xhr.setRequestHeader("Authorization", "Token vEdD9t701LtDaCZYrSEutHKSNnAuUFAV");
xhr.onload = e => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log("Status 200");
} else {
console.log("Error");
}
}
};
xhr.onerror = e => {
console.log("Error " + e);
};
xhr.send(body);
}
@token_required
@transaction.atomic
def add_inspection(request):
if request.method == "POST":
data = json.loads(request.POST.get('data'))
pictures = request.FILES
n_inspection = Inspection()
n_inspection.user_id = data['user']['id']
n_inspection.data = json.dumps(data)
n_inspection.save()
save_pictures(n_inspection, pictures)
return HttpResponse("Its ok.", status=200)
else:
return HttpResponse("Something went wrong.", status=400)
def save_pictures(inspection, pictures):
print(pictures) // Gives me <MultiValueDict: {'pictures': [<InMemoryUploadedFile: samsung-s8.png (image/png)>, <InMemoryUploadedFile: Simulator Screen Shot 6 Jul 2017, 15.43.55.png (image/png)>]}>
for picture in pictures['pictures']:
n_picture = InspectionPictures()
n_picture.inspection_id = inspection.id
n_picture.picture = picture
print(picture) // first iteration : b'\x89PNG\r\n'
n_picture.save()
def inspection_picture_path(self, filename):
return 'inspection_{0}/{1}'.format(self.inspection.id, filename)
class InspectionPictures(models.Model):
inspection = models.ForeignKey(Inspection, on_delete=models.CASCADE)
picture = models.FileField(upload_to=inspection_picture_path, blank=True)
def __str__(self):
return "Inspection-{}".format(self.inspection.id)
settings.pyMEDIA\u ROOTMEDIA\u URLMEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'master/static/master/img/inspection_pictures'),
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'master/static/master/img/inspection_pictures'),)
添加检查handleAdd(e){
e.preventDefault();
let data = this.state.data;
let pictures = this.state.pictures;
let body = new FormData();
body.append('data', JSON.stringify(data));
if (pictures.length > 0){
_.each(pictures, (picture, i) => {
body.append('pictures', picture);
});
}
let xhr = new XMLHttpRequest();
xhr.open('POST', `http://localhost:8000/master/api/add-inspection/`);
xhr.setRequestHeader("Authorization", "Token vEdD9t701LtDaCZYrSEutHKSNnAuUFAV");
xhr.onload = e => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log("Status 200");
} else {
console.log("Error");
}
}
};
xhr.onerror = e => {
console.log("Error " + e);
};
xhr.send(body);
}
@token_required
@transaction.atomic
def add_inspection(request):
if request.method == "POST":
data = json.loads(request.POST.get('data'))
pictures = request.FILES
n_inspection = Inspection()
n_inspection.user_id = data['user']['id']
n_inspection.data = json.dumps(data)
n_inspection.save()
save_pictures(n_inspection, pictures)
return HttpResponse("Its ok.", status=200)
else:
return HttpResponse("Something went wrong.", status=400)
def save_pictures(inspection, pictures):
print(pictures) // Gives me <MultiValueDict: {'pictures': [<InMemoryUploadedFile: samsung-s8.png (image/png)>, <InMemoryUploadedFile: Simulator Screen Shot 6 Jul 2017, 15.43.55.png (image/png)>]}>
for picture in pictures['pictures']:
n_picture = InspectionPictures()
n_picture.inspection_id = inspection.id
n_picture.picture = picture
print(picture) // first iteration : b'\x89PNG\r\n'
n_picture.save()
def inspection_picture_path(self, filename):
return 'inspection_{0}/{1}'.format(self.inspection.id, filename)
class InspectionPictures(models.Model):
inspection = models.ForeignKey(Inspection, on_delete=models.CASCADE)
picture = models.FileField(upload_to=inspection_picture_path, blank=True)
def __str__(self):
return "Inspection-{}".format(self.inspection.id)
保存图片handleAdd(e){
e.preventDefault();
let data = this.state.data;
let pictures = this.state.pictures;
let body = new FormData();
body.append('data', JSON.stringify(data));
if (pictures.length > 0){
_.each(pictures, (picture, i) => {
body.append('pictures', picture);
});
}
let xhr = new XMLHttpRequest();
xhr.open('POST', `http://localhost:8000/master/api/add-inspection/`);
xhr.setRequestHeader("Authorization", "Token vEdD9t701LtDaCZYrSEutHKSNnAuUFAV");
xhr.onload = e => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log("Status 200");
} else {
console.log("Error");
}
}
};
xhr.onerror = e => {
console.log("Error " + e);
};
xhr.send(body);
}
@token_required
@transaction.atomic
def add_inspection(request):
if request.method == "POST":
data = json.loads(request.POST.get('data'))
pictures = request.FILES
n_inspection = Inspection()
n_inspection.user_id = data['user']['id']
n_inspection.data = json.dumps(data)
n_inspection.save()
save_pictures(n_inspection, pictures)
return HttpResponse("Its ok.", status=200)
else:
return HttpResponse("Something went wrong.", status=400)
def save_pictures(inspection, pictures):
print(pictures) // Gives me <MultiValueDict: {'pictures': [<InMemoryUploadedFile: samsung-s8.png (image/png)>, <InMemoryUploadedFile: Simulator Screen Shot 6 Jul 2017, 15.43.55.png (image/png)>]}>
for picture in pictures['pictures']:
n_picture = InspectionPictures()
n_picture.inspection_id = inspection.id
n_picture.picture = picture
print(picture) // first iteration : b'\x89PNG\r\n'
n_picture.save()
def inspection_picture_path(self, filename):
return 'inspection_{0}/{1}'.format(self.inspection.id, filename)
class InspectionPictures(models.Model):
inspection = models.ForeignKey(Inspection, on_delete=models.CASCADE)
picture = models.FileField(upload_to=inspection_picture_path, blank=True)
def __str__(self):
return "Inspection-{}".format(self.inspection.id)
n\u picture.save（）handleAdd(e){
e.preventDefault();
let data = this.state.data;
let pictures = this.state.pictures;
let body = new FormData();
body.append('data', JSON.stringify(data));
if (pictures.length > 0){
_.each(pictures, (picture, i) => {
body.append('pictures', picture);
});
}
let xhr = new XMLHttpRequest();
xhr.open('POST', `http://localhost:8000/master/api/add-inspection/`);
xhr.setRequestHeader("Authorization", "Token vEdD9t701LtDaCZYrSEutHKSNnAuUFAV");
xhr.onload = e => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log("Status 200");
} else {
console.log("Error");
}
}
};
xhr.onerror = e => {
console.log("Error " + e);
};
xhr.send(body);
}
@token_required
@transaction.atomic
def add_inspection(request):
if request.method == "POST":
data = json.loads(request.POST.get('data'))
pictures = request.FILES
n_inspection = Inspection()
n_inspection.user_id = data['user']['id']
n_inspection.data = json.dumps(data)
n_inspection.save()
save_pictures(n_inspection, pictures)
return HttpResponse("Its ok.", status=200)
else:
return HttpResponse("Something went wrong.", status=400)
def save_pictures(inspection, pictures):
print(pictures) // Gives me <MultiValueDict: {'pictures': [<InMemoryUploadedFile: samsung-s8.png (image/png)>, <InMemoryUploadedFile: Simulator Screen Shot 6 Jul 2017, 15.43.55.png (image/png)>]}>
for picture in pictures['pictures']:
n_picture = InspectionPictures()
n_picture.inspection_id = inspection.id
n_picture.picture = picture
print(picture) // first iteration : b'\x89PNG\r\n'
n_picture.save()
def inspection_picture_path(self, filename):
return 'inspection_{0}/{1}'.format(self.inspection.id, filename)
class InspectionPictures(models.Model):
inspection = models.ForeignKey(Inspection, on_delete=models.CASCADE)
picture = models.FileField(upload_to=inspection_picture_path, blank=True)
def __str__(self):
return "Inspection-{}".format(self.inspection.id)
这里有很多错误。除此之外，您还没有将上传的文件内容保存到任何地方，因此这无法正常工作。我建议您阅读-正如这里所建议的，最简单的方法是通过一个模型来实现这一点。@DanielRoseman好的，您能告诉我这里有什么问题吗？我使用React作为前端，我不能使用modelform。我告诉过你了。我看不出这些事情有什么关系。当然，你可以将模型与React结合使用。@DanielRoseman不，先生，你没有。你说：“这里有很多错误。”。但你只说了一句“错”的话：“除了别的以外，…”。我知道这是可以做到的，当然我在阅读文档时也试图解决它，但我无法将它应用到我的例子和我的问题中，这就是为什么我在这里寻求帮助。把链接放在文档和“这里有问题”上对我没有帮助。