0

Estoy intentando subir una imagen pero me me devuelve que solo puedo subir imágenes con los parámetros que le puse al controlador para permitir ciertas imágenes como por ejemplo: 'poster' => 'required|mimes:jpg,jpeg,png'

Y me devuelve esto:

Esto es lo que me regresa

Tengo mas campos como de texto los que no me dan problema por ahora.

Ahora miren como lo hago con el código. Método upload():

upload() {
    this.apiFormData.append("cover", this.cover);
    this.apiFormData.append("poster", this.poster);
    this.apiFormData.append("name", this.name);
    this.apiFormData.append("year", this.year);

    this.$validator.validateAll().then(result => {
      if (result) {

        // disable button
        this.disabled_button = true;

        this.upload_data.api.show = true;
        this.upload_data.id = this.name;

        axios.post("/api/url/new/movie/customupload", this.apiFormData).then(
          response => {
            if (response.status === 200) {

              this.MOVIEVIDEO_S3(response.data.id); //#:: Funcion si cumple con los parametros

              this.$router.push({
                name: "movies-manage"
              });
            }
          },
          error => {
            this.disabled_button = false; //#:: Avilitar de nuevo el boton
          });
        }
      });
  },

Este es mi estructura html:

<div class="card-body">
        <div class="form-row">
          <div class="form-group col-md-3">
            <input type="file" id="cover" name="cover" v-validate="'required|image'" @change="readImage('cover','coverFileImage')" class="inputfile">
            <img src="" id="coverFileImage" width="200" style="display: none;">
            <span v-show="errors.has('cover')" class="is-danger">{{ errors.first('cover')}}</span>
          </div>
          <div class="form-group col-md-9">
            <div class="form-group">
              <label>Name</label>
              <input type="text" v-validate="'required|max:30'" v-model="name" class="form-control" name="name" autocomplete="off">
              <span v-show="errors.has('name')" class="is-danger">{{ errors.first('name') }}</span>
            </div>
            <label for="exampleTextarea">Description</label>
            <textarea v-validate="'required'" class="form-control" rows="10" name="description" v-model="description"></textarea>
            <span v-show="errors.has('desciption')" class="is-danger">{{ errors.first('desciption') }}</span>
          </div>
        </div>

      </div>
      <div class="card-footer">
        <button v-if="!disabled_button" class="btn btn-primary" @click="mupload(name)">Upload movie</button>
        <button v-if="disabled_button" class="btn btn-primary" disabled>Loading...</button>
      </div>

Otro metodos de validacion:

readImage(id, outImage) {
    var img = document.getElementById(id);
    var tgt = img.target || window.event.srcElement,
    files = tgt.files;

    // FileReader support
    if (FileReader && files && files.length) {
      var fr = new FileReader();
      fr.onload = function () {
        var srcImage = document.getElementById(outImage);
        srcImage.style.display = "block";
        srcImage.src = fr.result;
      };
      fr.readAsDataURL(files[0]);
    } else {
      // Not supported
      // fallback -- perhaps submit the input to an iframe and temporarily store
      // them on the server until the user's session ends.
    }
  }
}

Ahora que saben como recibo los datos ahora les muestro la función del controlador que se encarga de validar antes enviar los datos para insertarlos

public function customUpload(Request $request) {
  $request->validate([
    'name' => 'required|max:50|regex:/^[a-z0-9 .\-]+$/i',
    'description' => 'required|max:500',
    'cover' => 'required|mimes:jpg,jpeg,png',
    'poster' => 'required|mimes:jpg,jpeg,png',
  ]);

  return $this->upload($request);
}

Ahora sabemos como los recibo. La cosa que intente con implementar un form pero no dio resultado. Sigue mostrando el mismo error. Cambio solo requiriendo las imágenes pero me da error al alterarlas con image make. ¿Que puede ser el causante de este error?. Miré y leí pero los hacen de otra manera o igual pero les funciona diferente. Necesito hacerlo de esta manera.

Actualización: Estaba mirando que datos se estaban enviando pero me estoy dando cuenta que lo esta mandando algunos campos vacíos. ¿por que se envían vacíos?. introducir la descripción de la imagen aquí Cada uno tiene su name respectivo y en el return se le pone por defecto campos vacíos o nullos.

1 respuesta 1

0

Ya resolví el problema, solo tenia que definir las constantes llamando a los id's de los inputs y posteriormente tomar la primara imagen. Código:

const cover = document.querySelector("#cover");
const poster = document.querySelector("#poster");

this.apiFormData.append("cover", cover.files[0]);
this.apiFormData.append("poster", poster.files[0]);

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.