时间戳

首页 > 解决方案 > Javascript Vue：onFileChange（e）中的变量'e'来自哪里？

javascript - Javascript Vue：onFileChange（e）中的变量'e'来自哪里？

问题描述

Javascript Vue：变量e来自onFileChange(e)哪里？

在下面的代码中，有一个变量，它起源e于onFileChange(e)哪里？它从来没有在代码中声明或导入，那么它怎么可能有效呢？

任何帮助将不胜感激。

<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>

标签： javascriptvue.js

解决方案

当一个变量被调用e时，它通常是事件。您始终可以console.log(e)在浏览器控制台中读取其属性。

但根据这个例子 e是上传的文件：

methods: {
  thumbUrl (file) {
    return file.myThumbUrlProperty
  },
  onFileChange (file) {
    // Handle files like:
    this.fileUploaded = file
  }
}

推荐阅读