Question

我想通过单击v-input-file来触发隐藏的v-btn。我可以使用常规输入文件来执行此操作，但是我更喜欢使用v-input-file。这是我到目前为止所做的，但是没有用。

<v-card-text class="pt-6" style="position: relative;">
    <v-btn
        absolute
        color="orange"
        class="white--text"
         fab
         small
         right
         top
         @click="$refs.avatarInput.$el.click($event)"
      >
         <v-icon>mdi-camera</v-icon>
      </v-btn>
      <v-file-input
         v-show="true"
         ref="avatarInput"
         accept="image/png, image/jpeg, image/bmp"
         placeholder="Pick an avatar"
         prepend-icon="mdi-camera"
         label="Avatar"
      ></v-file-input>
   </v-card-text>

Answer 1

出于安全原因，无法以此方式触发input[type="file"]。

查看此答案以获取更多详细信息 https://stackoverflow.com/a/29873845/553073

以下是一些选择：

代替v-btn，而将label与for="idOfFileInput"一起使用，并根据需要使其看起来像一个按钮。单击标签将触发文件输入。
在文件输入上设置z-index和opacity=0并将其放置在按钮顶部，因此，当用户单击按钮时，文件输入将被单击。

如何从v-btn触发v-input-file

1 个答案: