Hi,
I have used code of Uploading Files With VueJS and Axios. I am using backend code Django uploaded images save into database. In after submit and before submit i am able to see images uploaded in console. But After submit i am not able to access formData into django backend. Below is snippet code
Template code
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<h2>Multiple Files</h2>
<hr/>
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<label>
<span>Files</span>
<input type="file" multiple name="file" @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 @click="submitFile()">Submit</button>
</form>
</div>
<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)
console.log('fn');
console.log(fn);
}
return fn
}
},
methods: {
handleFileUploads(event) {
this.files = event.target.files;
this.images = [...this.files].map(URL.createObjectURL);
console.log('images');
console.log(this.images);
let formData = new FormData();
for (var i = 0; i < this.files.length; i++) {
let file = this.files[i];
formData.append('files[' + i + ']', file);
}
console.log('formData');
console.log(formData);
console.log('values');
console.log(formData.values());
for (var value of formData.values()) {
console.log('value');
console.log(value);
}
},
submitFile() {
console.log("submit");
let formData = new FormData();
let fna = []
for (var i = 0; i < this.files.length; i++) {
let file = this.files[i];
formData.append('files[' + i + ']', file);
fna.push(file);
console.log('formData');
console.log(formData);
console.log('files[' + i + ']', file);
}
console.log('formData');
console.log(formData);
console.log(formData.values());
for (var value of formData.values()) {
console.log(value);
}
axios.post('/service-ad-testing', formData, {
headers: {
'X-CSRFTOKEN': '{{ csrf_token }}',
'Content-Type': 'multipart/form-data'
}
}).then(function() {
console.log('SUCCESS!!');
console.log('files');
console.log(this.files);
console.log('images');
console.log(this.images);
})
.catch(function() {
console.log('FAILURE!!');
});
}
}
})
</script>
Django views.py
def servicevue_test(request):
if request.method == "POST":
data = request.POST.getlist('file')
data1 = request.POST.get('file')
print('data')
print(data)
print(data1)
savehotel = Hotel(
image=data,
image2=data,
)
savehotel.save()
messages.success(request, """Your Ad is successfully posted.""")
return JsonResponse(data, safe=False)
return render(request, 'testlightbox.html')
From above code I am getting response empty list. How Can I achieve to save data into database. Please any one can help me to achieve this Thank you.