问在vuejs中处理文件输入？
EN

Stack Overflow用户

提问于 2021-11-03 05:59:18

回答 1查看 77关注 0票数 1

我已经尝试过用按钮打开文件输入。但是，当我点击按钮时，客户端说："this.$refs.image.click“，这是我的代码

<v-btn
                      height="50"
                      width="180"
                      color="#6C63FF"
                      class="mx-8 my-4"
                      @click="selectFile()"
                    >
                      <v-icon color="white"> mdi-image-plus </v-icon></v-btn
                    >

                    <input
                      ref="image"
                      type="file"
                      accept="image/*"
                      style="display: none"
                      @change="getFileImage"
                      multiple
                    />
                  </v-col>
methods: {
    selectFile() {
      this.$refs.image.click()
    },
}

javascript

html

vue.js

回答 1

Stack Overflow用户

发布于 2021-11-03 08:27:56

它工作正常，请用下面的代码交叉检查你的代码

var app = new Vue({
 el: '#app',
 vuetify: new Vuetify(),
 methods: {
  openModal() {
   this.$refs.image.click();
  }
 }
});

<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>
         <v-btn
         height="50"
         width="180"
         color="#6C63FF"
         class="mx-8 my-4"
         @click="openModal()"><v-icon color="white"> mdi-image-plus </v-icon></v-btn>
         <input ref="image"
                  type="file"
                  accept="image/*"
                  style="display: none" style="display: none" multiple/> 
        </v-container>
      </v-main>
    </v-app>
  </div>
  </body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69820253

复制

相似问题

问在vuejs中处理文件输入？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在vuejs中处理文件输入？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在vuejs中处理文件输入？
EN