問題描述

我在 Vue.js 中為我的前端使用 Vuetify.js 組件，并希望創(chuàng)建一個帶有文件上傳的用戶注冊表單.我可以使用 v-text-field(一個 Vuetify 組件)創(chuàng)建表單.

I'm using Vuetify.js components for my front-end in Vue.js and want to create a user registration form with file upload. I'm able to create the form using v-text-field (a Vuetify component).

• 如何上傳被選中(輸入)的文件?
• 我應(yīng)該使用哪個組件或有其他替代方法?

推薦答案

Vue JS 直到今天還沒有文件輸入功能，所以你可以調(diào)整 v-text-field 使其像圖像輸入字段一樣工作.概念是，創(chuàng)建一個文件輸入字段，然后使用 css 將其隱藏，并在 v-text-field 中添加一個事件以觸發(fā)該特定文件輸入字段以上傳圖像.我附上了片段，請玩一下，我也有一個使用 vue 和 vuetify 創(chuàng)建的小提琴，請訪問 這里.謝謝！

Vue JS do not have file-input feature till today, so you can tweak v-text-field to work like image input field. The concept is, create an file input field and then hide it using css, and add an event in v-text-field to trigger that specific file input field to upload image. I have attached snippet please do play with that, and I also do have a fiddle created using vue and vuetify, visit here. Thanks!

new Vue({
  el: '#app',
  data: () => ({
    title: "Image Upload",
    dialog: false,
    imageName: '',
    imageUrl: '',
    imageFile: ''
  }),

  methods: {
    pickFile() {
      this.$refs.image.click()
    },

    onFilePicked(e) {
      const files = e.target.files
      if (files[0] !== undefined) {
        this.imageName = files[0].name
        if (this.imageName.lastIndexOf('.') <= 0) {
          return
        }
        const fr = new FileReader()
        fr.readAsDataURL(files[0])
        fr.addEventListener('load', () => {
          this.imageUrl = fr.result
          this.imageFile = files[0] // this is an image file that can be sent to server...
        })
      } else {
        this.imageName = ''
        this.imageFile = ''
        this.imageUrl = ''
      }
    }
  }
})

<link  rel="stylesheet">
<link  rel="stylesheet">
<div id="app">
  <v-app>
    <v-toolbar dark color="primary">
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title class="white--text">{{ title }}</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon @click="dialog = !dialog">
        <v-icon>link</v-icon>
      </v-btn>
    </v-toolbar>
    <v-content>
      <v-container fluid>
        <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
          <img :src="imageUrl" height="150" v-if="imageUrl"/>
          <v-text-field label="Select Image" @click='pickFile' v-model='imageName' prepend-icon='attach_file'></v-text-field>
          <input
            type="file"
            style="display: none"
            ref="image"
            accept="image/*"
            @change="onFilePicked"
          >
        </v-flex>
        <v-dialog v-model="dialog" max-width="290">
          <v-card>
            <v-card-title class="headline">Hello World!</v-card-title>
            <v-card-text>
              Image Upload Script in VUE JS
              <hr>
              Yubaraj Shrestha
              <br>http://yubarajshrestha.com.np/
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Close</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-container>
    </v-content>
  </v-app>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>

最新版本 (V2.0.5) 在編輯這篇日期為 2019 年 8 月 11 日的帖子時，有一個專用的文件輸入選項.請點擊以下鏈接獲取官方文檔:https://vuetifyjs.com/en/components/file-輸入.

Latest version (V2.0.5) while editing this post dated Aug 11, 2019, there's a dedicated file input option. Please follow the link below for official documentation: https://vuetifyjs.com/en/components/file-inputs.

這篇關(guān)于在 vuetify 中上傳文件的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！