2

he intentado muchas maneras de subir un archivo, pero siempre me dice lo mismo: Error Error-

tengo un Form en el cual ingreso datos y también debo ingresar una fotografía, por lo q he investigado se ve sencillo, pero todo lo q he intentado me da el mismo error, utilizo vue-resource, sin subir la imagen todo me funciona perfecto, agrego registros, edito y elimino y no me da ningun error.

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Este es mi html:

<b-form-file v-model="elmovimiento.imagen" type="file" id="file" ref="file" v-on:change="onFileChange(event)"></b-form-file>

Y este mi función:

onFileChange(e) {
            var files = event.target.files[0];
            if (!files.length)
                return;
            this.createImage(files[0]);
        },
        createImage(file) {
            var image = new Image();
            var reader = new FileReader();
            var vm = this;

            reader.onload = (file) => {
                vm.image = e.target.result;
            };
            reader.readAsDataURL(file);
        },

Dentro de mi modelo defino hacia donde lo va a guardar, y creo que en el back no hay problema por que desde Django Rest Framework, puedo hacer PUT y agregando una imagen y si me lo hace muy bien.

"imagen": "http://127.0.0.1:8000/media/ovinos/dart_IJwfgst.jpg",

Así lo guarda, por lo cual creo no hay ningún problema, lo que pienso es q no sube el archivo. En mi v-model="elmovimiento.imagen" es lo q me muestra que tiene en la base de datos o el array para llenar datos del Form.

Al final hago PUT para guardar mis datos:

updateMovimiento: function() {
            id = this.elmovimiento.id;
            varurl = "/control/movimiento/api/mov/"+id+'/';
            this.$http.put(varurl, this.elmovimiento).then(response => {
                this.loading = false;
                this.elmovimiento = response.data;
                this.$root.$emit('bv::hide::modal', this.infoModal.id);
            })
            .catch((error) => {
                this.loading = false;
                //alert("Error: "+error);
                console.log(error);
            })
        },

Espero y alguien pueda ayudarme, llevo 2 días con esto y no avanzo. Gracias.


Código Completo: Model apps.control.models

 class Movimiento(models.Model):
        tipo = models.CharField(max_length=1, blank=True, null=True, choices=TIPO)
        descripcion = models.CharField(max_length=1, blank=True, null=True, choices=DESCRIP)
        fecha = models.DateField(blank=True, null=True)            
        arete = models.CharField(max_length=10, blank=True, null=True)            
        sexo = models.CharField(max_length=1, blank=True, null=True)
        madre = models.ForeignKey('self', blank=True, null=True, on_delete=models.CASCADE, related_name='arete_madre')
        razamadre = models.ForeignKey(Raza, blank=True, null=True, on_delete=models.CASCADE, related_name='madreraza')            
        razaanimal = models.ForeignKey(Raza, blank=True, null=True, on_delete=models.CASCADE, related_name='movimiento_raza')
        imagen = models.ImageField(verbose_name="Imagen", blank=True, null=True, upload_to="ovinos")
        peso = models.IntegerField(default=0)
        observaciones = models.CharField(max_length=255, blank=True, null=True)

        def __str__(self):
            return self.arete

Model apps.catalogos.models

class Raza(models.Model):
    codigo = models.CharField(max_length=4,blank=True,null=True)
    nombre = models.CharField(max_length=100,blank=True,null=True)
    color = ColorField(default='#FF0000')

    def __str__(self):
        return self.nombre

Choices apps.control.choice

TIPO = (('C', 'Compra'),
            ('N', 'Nacimiento'),
            )

DESCRIP = (('S', 'Semental'),
            ('E', 'Engorda'),
            ('V', 'Vientre'),
            ('R', 'Reemplazo'),
            ('P', 'Producto'),
            )

form apps.control.form

class MovimientoForm(forms.ModelForm):
    tipo = forms.ChoiceField(label="Tipo:", widget=forms.Select(), choices = TIPO, required=True)
    descripcion = forms.ChoiceField(label='Descripcion:', widget=forms.Select(), choices = DESCRIP, required=True)
    fecha = forms.DateField(label='Fecha:', widget=forms.SelectDateWidget(years=range(2018,2025)))
    arete = forms.CharField(label='Arete:', widget=forms.TextInput(attrs={'class': 'form-control',}))
    madre = forms.Select(attrs={'class': 'form-control',})
    razamadre = forms.Select(attrs={'class': 'form-control',})
    peso = forms.CharField(label='Peso:', widget=forms.TextInput(attrs={'class': 'form-control',}))
    razaanimal = forms.Select(attrs={'class': 'form-control',})
    observaciones = forms.CharField(label='Observaciones:', widget=forms.Textarea(attrs={'class': 'form-control','placeholder':'Observaciones',}))

    class Meta:
        model = Movimiento
        fields = '__all__'

Vista apps.control.views

from django.views.generic import TemplateView, CreateView, ListView, UpdateView, DeleteView
from django.urls import reverse_lazy
from django.shortcuts import render,redirect
from django.core.exceptions import ObjectDoesNotExist
from .models import Movimiento
from .forms import MovimientoForm
from rest_framework.response import Response
from rest_framework.views import APIView
from rest_framework.generics import ListAPIView, CreateAPIView, ListCreateAPIView, RetrieveUpdateDestroyAPIView
from .serializer import MovimientoSerializer
import json
from django.http import HttpResponse, HttpResponseRedirect, JsonResponse


class MovimientoList(ListView):
    model = Movimiento
    template_name = 'control/movimiento/listarmovimiento.html'

Serializer apps.control.serializer

from rest_framework.serializers import ModelSerializer
from rest_framework import serializers
from apps.control.models import Movimiento

class MovimientoSerializer(ModelSerializer):
    #descripcion = serializers.SerializerMethodField()
    #tipo = serializers.SerializerMethodField()
    #razaanimal = serializers.SlugRelatedField(slug_field="nombre", queryset=Raza.objects.all())

    class Meta:
        model = Movimiento
        fields = '__all__'

Viewsets apps.control.viewsets

from rest_framework import viewsets
from apps.control.models import Movimiento
from apps.control.serializer import MovimientoSerializer

class Movimiento_viewsets(viewsets.ModelViewSet):
    queryset = Movimiento.objects.all()
    serializer_class = MovimientoSerializer

Router apps.control.router

from rest_framework import routers
from rest_framework.routers import DefaultRouter
from . import viewsets as viewSet

router = routers.DefaultRouter()

router.register(r'mov', viewSet.Movimiento_viewsets,base_name='mov')

Urls apps.control.urls

from django.contrib import admin
from django.urls import path, re_path, include
from .views import MovimientoList
from .routers import router

urlpatterns = [
    path('cerrar/', logout_then_login, name='logout'),
    path('movimiento/listar', MovimientoList.as_view(), name='listar-movimiento'),
    path('movimiento/api/', include(router.urls)),

]

Y lo demas que he puesto arriba

5
  • Saludos Enrique, acabo de ver el código y me parece que está incompleto, en ningún lado mencionas que estás usando bootstrap-vue.js.org/docs/components/form-file tampoco muestras el formulario y finalmente ¿en qué momento realizas el submit o lanzas una petición ajax al servidor?
    – fredyfx
    el 4 jun. 2019 a las 5:46
  • 1
    Que tal Fredyfx, precisamente ahorita acabo de ver una solución, ya que me he dedicado a buscarle por q razón, si en el RestFrameWork puedo hacerlo, y acá en esta liga la encontre: stackoverflow. Asi q ha quedado solucionado, gracias por la atención. el 4 jun. 2019 a las 14:57
  • Excelente, agrega la solución y marca la respuesta como aceptada en 24-48 horas. Ayudarás a más desarrolladores y colaboras con la buena salud del sitio :D
    – fredyfx
    el 4 jun. 2019 a las 15:04
  • 1
    Muchas gracias por colaborar con el orden, finalmente me gustaría pedirte que eliminemos los comentarios a partir de "Oye añado una respuesta o edito mi pregunta,". Cosa que ya todo queda claro :D
    – fredyfx
    el 4 jun. 2019 a las 19:02
  • Hola alguien q me ayude con la edición q hice?? el 16 jul. 2019 a las 6:14

1 respuesta 1

2

Encontré esta solución después de tanto batallar y acá no encontrarla, solución

modifique en mi serializer y agregue lo que comentan, de la siguente manera:

from django.forms.fields import ImageField

class Base64ImageField(serializers.ImageField):

    def to_internal_value(self, data):
        from django.core.files.base import ContentFile
        import base64
        import six
        import uuid

        if isinstance(data, six.string_types):                
            if 'data:' in data and ';base64,' in data:                    
                header, data = data.split(';base64,')    

            try:
                decoded_file = base64.b64decode(data)
            except TypeError:
                self.fail('invalid_image')    

            file_name = str(uuid.uuid4())[:12]                
            file_extension = self.get_file_extension(file_name, decoded_file)

            complete_file_name = "%s.%s" % (file_name, file_extension, )

            data = ContentFile(decoded_file, name=complete_file_name)

        return super(Base64ImageField, self).to_internal_value(data)

    def get_file_extension(self, file_name, decoded_file):
        import imghdr

        extension = imghdr.what(file_name, decoded_file)
        extension = "jpg" if extension == "jpeg" else extension

        return extension

De serializer:

class MovimientoSerializer(ModelSerializer):

    imagen = Base64ImageField(max_length=None, allow_empty_file=False, use_url=True)

    class Meta:
        model = Movimiento
        fields = '__all__'

Después de esto instale flake:

pip install flake8-django

y también instale six:

pip install six

corrí el servidor y ya me acepto sin ningún problema subir las imágenes, espero que les sirva, gracias.

EDITO: Hola de nuevo, encontré un error al terminar el CRUD, no me deja hacer un update, sin ni siquiera mover la imagen, aunque actualice cualquier cosa, no me deja. Me manda un error status: 500, statusText: "Internal Server Error". si quito la imagen si me deja hacer lo demás, lo que pienso es q al mandar a llamar la id no me trae la imagen con la conversión Base64, alguien puede ayudarme, ya le batalle y nada??? En el debug me manda esto: binascii.Error: Incorrect padding, quiero entender que no lee esa validacion o que lo lee pero para hacer el put no lo toma en cuenta, alguien que sepa que puede ser???

8
  • Hola de nuevo, encontré un error al terminar el CRUD, no me deja hacer un update, sin ni siquiera mover la imagen, aunque actualice cualquier cosa, no me deja. Me manda un error status: 500, statusText: "Internal Server Error". si quito la imagen si me deja hacer lo demás, lo que pienso es q al mandar a llamar la id no me trae la imagen con la conversión Base64, alguien puede ayudarme, ya le batalle y nada??? el 26 jun. 2019 a las 10:07
  • en el debug me manda esto: binascii.Error: Incorrect padding, quiero entender que no lee esa validacion o que lo lee pero para hacer el put no lo toma en cuenta, alguien que sepa que puede ser??? el 11 jul. 2019 a las 6:55
  • Hola alguien me podría orientar por favor el 11 jul. 2019 a las 18:20
  • Hola, hola, algún comentario que me pueda ayudar, no encuentro ninguna solución por favor el 15 jul. 2019 a las 5:33
  • Esto es otra pregunta hermano
    – fredyfx
    el 16 jul. 2019 a las 17:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.