#40 fix: upload de imágenes con multipart/form-data

src/components/CatalogueImagesManagement.vue

@@ -100,13 +100,14 @@
             />
 
             <v-file-input
-              v-model="form.file"
+              ref="fileInputRef"
               label="Imagen"
               accept="image/*"
               :rules="[(v) => !!v || 'Seleccione una imagen']"
               variant="outlined"
               prepend-icon="mdi-camera"
               class="mb-3"
+              @update:model-value="onFileSelected"
             />
 
             <v-img
@@ -200,9 +201,11 @@ const dialog = ref({
   editingItem: null,
 });
 
+const fileInputRef = ref(null);
+const selectedFile = ref(null);
+
 const form = ref({
   product: null,
-  file: null,
   preview: null,
 });
 
@@ -229,7 +232,7 @@ const productOptions = computed(() => {
 });
 
 watch(
-  () => form.value.file,
+  selectedFile,
   (file) => {
     if (previewObjectUrl) {
       URL.revokeObjectURL(previewObjectUrl);
@@ -246,6 +249,10 @@ watch(
   },
 );
 
+function onFileSelected(file) {
+  selectedFile.value = file;
+}
+
 function formatDate(dateStr) {
   if (!dateStr) return "-";
   const d = new Date(dateStr);
@@ -276,14 +283,15 @@ async function loadProducts() {
 
 function openCreateDialog() {
   dialog.value = { show: true, isEdit: false, editingItem: null };
-  form.value = { product: null, file: null, preview: null };
+  selectedFile.value = null;
+  form.value = { product: null, preview: null };
 }
 
 function openEditDialog(item) {
   dialog.value = { show: true, isEdit: true, editingItem: item };
+  selectedFile.value = null;
   form.value = {
     product: item.product,
-    file: null,
     preview: item.image,
   };
 }
@@ -293,10 +301,11 @@ function closeDialog() {
     URL.revokeObjectURL(previewObjectUrl);
     previewObjectUrl = null;
   }
+  selectedFile.value = null;
   dialog.value.show = false;
   dialog.value.isEdit = false;
   dialog.value.editingItem = null;
-  form.value = { product: null, file: null, preview: null };
+  form.value = { product: null, preview: null };
 }
 
 async function submitForm() {
@@ -310,8 +319,8 @@ async function submitForm() {
   try {
     const fd = new FormData();
     fd.append("product", form.value.product);
-    if (form.value.file) {
+    if (selectedFile.value) {
-      fd.append("image", form.value.file);
+      fd.append("image", selectedFile.value);
     }
 
     if (dialog.value.isEdit) {

src/services/django-api.js

@@ -138,12 +138,16 @@ class DjangoApi {
 
     createCatalogueImage(data) {
         const url = this.base + "/don_confiao/api/catalogue_images/";
-        return http.post(url, data).then((r) => r.data);
+        return http.post(url, data, {
+            headers: { 'Content-Type': undefined },
+        }).then((r) => r.data);
     }
 
     updateCatalogueImage(id, data) {
         const url = this.base + `/don_confiao/api/catalogue_images/${id}/`;
-        return http.put(url, data).then((r) => r.data);
+        return http.put(url, data, {
+            headers: { 'Content-Type': undefined },
+        }).then((r) => r.data);
     }
 
     deleteCatalogueImage(id) {