web-dev-qa-db-ja.com

vuetifyでのファイルのアップロード

Vuejsのフロントエンドにvuetifyコンポーネントを使用しています。ファイルをアップロードするユーザー登録フォームを作成したい。 vuetifyでv-text-fieldを使用してフォームを作成できますが、ファイルをアップロードする方法はあります。使用するコンポーネントまたはその他の代替方法。

javascriptframeworksvue.jsvuetify.js
39
praneet drolia

Vue JSには今日までファイル入力機能がないため、v-text-fieldを調整して画像入力フィールドのように機能させることができます。コンセプトは、ファイル入力フィールドを作成し、cssを使用して非表示にし、v-text-fieldにイベントを追加して、その特定のファイル入力フィールドをトリガーして画像をアップロードすることです。スニペットを添付しました。それで遊んでください。また、vueとvuetifyを使用してフィドルを作成しました。 here にアクセスしてください。ありがとう！

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 href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" 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>

2019年8月11日付のこの投稿の編集中に最新バージョン（V2.0.5）には、専用のファイル入力オプションがあります。公式ドキュメントについては、以下のリンクを参照してください： https://vuetifyjs.com/en/components/file-inputs 。

53
Yubaraj Shrestha

これは将来追加するものですが、現在は追加しません。しばらくの間使用している実装を投稿しているいくつかのユーザーとのgithubに関する議論があります https://github.com/vuetifyjs/vuetify/issues/238

28
John Leider

簡単なトリックは次のとおりです。

<v-btn color="success" @click="$refs.inputUpload.click()">Success</v-btn>
<input v-show="false" ref="inputUpload" type="file" @change="yourFunction" >

次のプロパティに入力するだけです

  • type=file
  • ref=inputUploadこれはIDのように機能します。好きな名前を付けることができます
  • v-show=falseこれは入力を隠します

次に、クリックすると入力のアップロードボタンをクリックするボタンを作成します

25
Ing Oscar MR

良いニュース。

バージョンで始まる 2.0.0.-beta.8v-file-input はVuetifyで利用可能です。次のように使用することになっています。

<template>
  <v-file-input accept=".txt" label="Select File..."></v-file-input>
</template>

編集（スニペットの追加）：

画像ファイルを処理するための基本的な使用法は、次のように実装できます。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    file: null,
    imageUrl: null
  }),
  methods: {
    onFileChange() {
      let reader = new FileReader()
      reader.onload = () => {
        this.imageUrl = reader.result
      }
      reader.readAsDataURL(this.file)
    },
    onUpload() {
      console.log(this.file)
    }
  }
})
<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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-file-input 
          v-model="file" 
          label="Select Image File..." 
          accept="image/*" 
          @change="onFileChange"
        ></v-file-input>
        <v-btn color="primary" @click="onUpload">Upload</v-btn>
      </v-container>
    </v-content>
  </v-app>
</div>
5
vahdet