JavaScript VUE: Où est la variable Dans le code suivant, il existe une variable Toute aide serait grandement appréciée. P> E code> dans Onfilechange (e) code> est originaire? 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> <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>
4 Réponses :
la déclaration déclare une fonction avec le nom onfilechange (E) { code> p>
Onfilechange code> qui prend un seul paramètre E code>. C'est ce qui introduit la variable dans le corps de la fonction. P>
@ 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.
Lorsqu'une variable est appelée mais selon ce Exemple E code> c'est généralement l'événement. Vous pouvez toujours console.log (e) code> et lire ses propriétés dans la console du navigateur. E code> est le fichier téléchargé: p>
Cette déclaration est déclenchée par votre modèle, où vous êtes liant modifier code> é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 CODE> pour de meilleures informations https://vuejs.org/v2/guide/events.html#method-event-handlers P>
Onfilechange (E) code> a E code> comme Event code> en rapport avec le DOM. Depuis lors, affectant la fonction dans html code> s'il n'y a pas de paramètre passé, l'événement code> en tant que paramètre est automatiquement transmis par JavaScript. P>
Onfilechange (E) {} code> déclare une méthode qui prend un paramètre. Ce paramètre est simplement nomméE code> mais il pourrait également être nommébanane code> - 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 fonctionplusOne (x) {retour x + 1; } code> Vous avez une fonction qui prend un paramètre nomméx code> mais que vous n'avez pas à le déclarer nulle part, mais la fonction elle-même. Même chose avecOnfilechange code>.