vue.js 如何从v-btn触发v-input-file

qco9c6ql 于 2023-06-06 发布在 Vue.js

关注(0)|答案(2)|浏览(226)

我想通过单击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>

vue.js

来源：https://stackoverflow.com/questions/63068845/how-to-trigger-v-input-file-from-a-v-btn

2条答案

按热度按时间

2uluyalo1#

由于安全原因，不能以这种方式触发input[type="file"]。
查看此答案了解更多详情https://stackoverflow.com/a/29873845/553073
以下是一些选项：
1.使用label和for="idOfFileInput"代替v-btn，如果你喜欢，可以让它看起来像一个按钮。点击标签将触发文件输入。
1.在文件输入上设置z-index和opacity=0，并将其放置在按钮的正上方，因此当用户单击按钮时，文件输入会被单击。

赞(0）回复(0）举报 2023-06-06

cgvd09ve2#

解决……

<v-card class="mx-auto pt-2" elevation="0" color="#D6E5E5">
                  <label for="fileUpload">
                    <v-img
                      :src="
                        urlPreviewImage
                          ? urlPreviewImage
                          : 'https://cdn-icons-png.flaticon.com/512/1206/1206451.png?w=740&t=st=1685665297~exp=1685665897~hmac=896c6e31bc0520ef6ff64fb679d4fb25c4cc12abf386c0bb707dda62a85803b3'
                      "
                      max-height="200"
                      contain
                    ></v-img>
                  </label>

                  <v-file-input
                    id="fileUpload"
                    show-size
                    accept="image/*"
                    @change="selectFile"
                    truncate-length="50"
                    prepend-icon="mdi-image-area"
                    hide-details=""
                  >
                    <template v-slot:selection="{ index, text }">
                      <small v-if="index < 2" style="color: #196464;">
                        {{ text }}
                      </small>
                    </template>
                  </v-file-input>
                </v-card>

赞(0）回复(0）举报 2023-06-06

我来回答

vue.js 如何从v-btn触发v-input-file

2条答案

相关问题

热门标签

最新问答