Проблема с загрузкой изображений. При загрузке изображения принимается только имя изображения, но не сами изображения, как решить эту проблему?
Используя Vuejs, Axios и Django, мы загружаем "несколько изображений" с помощью формы Vuejs за одну попытку загрузки/просмотра. После загрузки изображения попадают в список, а затем список имен изображений сохраняется в бэкенде в поле ImageField. Имена изображений сохраняются в базе данных, но не сохраняются в папке Media Folder. Вот фрагмент кода
Vuejs
<label>
<span>Files</span>
<input type="file" multiple @change="handleFileUploads($event)" />
<ul v-if="files.length">
<li v-for="(name, i) in filesNames" :key="i">{{ name }}</li>
</ul>
</label>
<div>
<img v-for="image in images" :src="image" />
</div>
<br />
<button v-on:click.prevent="submitForm">Submit</button>
Аксиокс
<script>
new Vue({
el: '#app',
data() {
return {
files: [],
images: [],
}
},
computed: {
filesNames() {
const fn = []
for (let i = 0; i < this.files.length; ++i) {
fn.push(this.files.item(i).name)
}
return fn
}
},
methods: {
handleFileUploads(event) {
this.files = event.target.files;
this.images = [...this.files].map(URL.createObjectURL);
},
submitFile() {
let formData = new FormData();
for (var i = 0; i < this.files.length; i++) {
let file = this.files[i];
formData.append('files[' + i + ']', file);
}
submitForm: function(){
let formData = new FormData();
const fna = []
for (let i = 0; i < this.files.length; ++i) {
fna.push(this.files.item(i).name)
}
console.log('fna');
console.log(fna);
axios({
method : "POST",
url: "{% url 'service-ad' %}",
headers: {'X-CSRFTOKEN': '{{ csrf_token }}',
'Content-Type': 'multipart/form-data'},
data : {
"images": fna,
},
}).then(response => {
console.log('SUCCESS!!');
}).catch(err => {
console.log('FAILURE!!');
});
}
}
})
</script>
В другом случае мы имеем аналогичную функциональность загрузки "нескольких изображений" за одну попытку загрузки/просмотра, но здесь мы используем HTML форму и имена изображений сохраняются в базе данных, а также в папке Media Folder.
Django
def servicevue(request):
if request.method == "POST":
data = json.loads(request.body)
images = data['images']
img_length = len(images)
if img_length == 1:
image_name = images[0]
image_name2 = ''
elif img_length == 2:
image_name = images[0]
image_name2 = images[1]
else:
image_name = ''
image_name2 = ''
savehotel = Hotel(
image=image_name,
image2=image_name2,
)
savehotel.save()
messages.success(request, """Your Ad is successfully posted.""")
return JsonResponse(safe=False)
return render(request, 'servicead.html')
Так что мы задаемся вопросом, в чем может быть проблема. Мы надеемся, что наш код реализован правильно. Пожалуйста, помогите, есть ли способ разблокировать эту проблему?