-1
votes

JavaScript VUE: D'où proviennent la variable 'E' dans Onfilechange (e)?

JavaScript VUE: Où est la variable E code> dans Onfilechange (e) code> est originaire?

Dans le code suivant, il existe une variable E Code> dans Onfilechange (E) Code>, où est-il originaire? Il n'est jamais déclaré ou importé dans le code, comment peut-il être valide? P>

Toute aide serait grandement appréciée. P>

<template>
  <div class="container" style="margin-top: 50px;">
    <div class="text-center">
      <h4>File Upload with VueJS and Laravel</h4>
      <br />
      <div style="max-width: 500px; margin: 0 auto;">
        <div v-if="success !== ''" class="alert alert-success" role="alert">
          {{success}}
        </div>
        <form @submit="submitForm" enctype="multipart/form-data">
          <div class="input-group">
            <div class="custom-file">
              <input
                type="file"
                name="filename"
                class="custom-file-input"
                id="inputFileUpload"
                v-on:change="onFileChange"
              />
              <label class="custom-file-label" for="inputFileUpload"
                >Choose file</label
              >
            </div>
            <div class="input-group-append">
              <input type="submit" class="btn btn-primary" value="Upload" />
            </div>
          </div>
          <br />
          <p class="text-danger font-weight-bold">{{filename}}</p>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    mounted() {
      console.log("Component successfully mounted.");
    },
    data() {
      return {
        filename: "",
        file: "",
        success: ""
      };
    },
    methods: {
      onFileChange(e) {
        //console.log(e.target.files[0]);
        this.filename = "Selected File: " + e.target.files[0].name;
        this.file = e.target.files[0];
      },
      submitForm(e) {
        e.preventDefault();
        let currentObj = this;
        const config = {
          headers: {
            "content-type": "multipart/form-data",
            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]')
              .content
          }
        };

        // form data
        let formData = new FormData();
        formData.append("file", this.file);

        // send upload request
        axios
          .post("/store_file", formData, config)
          .then(function(response) {
            currentObj.success = response.data.success;
            currentObj.filename = "";
          })
          .catch(function(error) {
            currentObj.output = error;
          });
      }
    }
  };
</script>


1 commentaires

Onfilechange (E) {} déclare une méthode qui prend un paramètre. Ce paramètre est simplement nommé E mais il pourrait également être nommé banane - il importe peu, car c'est juste une étiquette. Il n'a pas besoin d'être spécial pour déclarer un paramètre - si vous avez une fonction plusOne (x) {retour x + 1; } Vous avez une fonction qui prend un paramètre nommé x mais que vous n'avez pas à le déclarer nulle part, mais la fonction elle-même. Même chose avec Onfilechange .


4 Réponses :


0
votes

la déclaration onfilechange (E) {

déclare une fonction avec le nom Onfilechange qui prend un seul paramètre E . C'est ce qui introduit la variable dans le corps de la fonction.


1 commentaires

@ 65535 Un événement. On l'appelle quand un événement de changement se produit, vous obtenez donc l'événement de changement lui-même.



1
votes

Lorsqu'une variable est appelée E c'est généralement l'événement. Vous pouvez toujours console.log (e) et lire ses propriétés dans la console du navigateur.

mais selon ce Exemple E est le fichier téléchargé: xxx


0 commentaires

1
votes

Cette déclaration est déclenchée par votre modèle, où vous êtes liant modifier événement sur la méthode. L'ensemble de l'événement en tant que paramètre est transmis à la méthode, reportez-vous à cette section de VUE DOCS pour de meilleures informations https://vuejs.org/v2/guide/events.html#method-event-handlers


0 commentaires

1
votes

Onfilechange (E) a E comme Event en rapport avec le DOM. Depuis lors, affectant la fonction dans html s'il n'y a pas de paramètre passé, l'événement en tant que paramètre est automatiquement transmis par JavaScript.


0 commentaires