问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue input 文件上传为什么@change不触发？

头像
rain
    4756112232
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>excel 文件上传</title>
  </head>
  <body>
    <input
      type="file"
      @click="e => {e.target.value = '';} "
      @change="sendFiles"
    />

    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script>
      let { createApp, reactive, toRefs, ref, onMounted, getCurrentInstance } =
        Vue;
      // Object.assign(window, Vue);
      const app = createApp({
        setup() {
          function sendFiles(files) {
            console.log("触发发送文件change");
            // const reader = new FileReader();
            // const file = files[0];
            // reader.readAsArrayBuffer(file);
            // reader.onload = function (e) {
            //   console.log(e.target.result);
            //   axios.post("/uploadExcel/" + file.name, {
            //     file: e.target.result,
            //   });
            // };
          }
          onMounted(() => {});
          return {
            sendFiles,
          };
        },
      });
    </script>
  </body>
</html>
    vue.jsjavascript
    阅读 254
    1 个回答
    得票最新
    头像
    rain
      4756112232
      ✓ 已被采纳

      忘了要挂载啥的了

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>excel 文件上传</title>
  </head>
  <body>
    <div id="app" v-cloak>
         <input type="file" @change="sendFiles" />
    <div @click="sendFiles">8888</div>
    </div>
   

    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script>
      let { createApp, reactive, toRefs, ref, onMounted, getCurrentInstance } =
        Vue;
      // Object.assign(window, Vue);
      const app = createApp({
        setup() {
          function sendFiles(files) {
            console.log("触发发送文件change");
            // const reader = new FileReader();
            // const file = files[0];
            // reader.readAsArrayBuffer(file);
            // reader.onload = function (e) {
            //   console.log(e.target.result);
            //   axios.post("/uploadExcel/" + file.name, {
            //     file: e.target.result,
            //   });
            // };
          }
          onMounted(() => {});
          return {
            sendFiles,
          };
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏