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

Question

我想通过点击一个v-btn来触发一个隐藏的v-input-file。我可以使用常规的输入文件，但我更喜欢使用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"，如果你喜欢，让它看起来像一个按钮。单击标签将触发文件输入。

1. 在文件输入上设置z-index和opacity=0，并将其放在按钮的正上方，这样当用户单击按钮时，文件输入就会被单击。