在 vuetify 中上传文件 [关闭]

Question

我在 Vue.js 中为我的前端使用 Vuetify.js 组件，并希望创建一个带有文件上传的用户注册表单。我可以使用 v-text-field（一个 Vuetify 组件）创建表单。

• 如何上传选中（输入）的文件？
• 我应该使用哪个组件或有其他替代方法？

Answer 1

这是我们将来会添加的内容，但目前不会。在 github 上有讨论，有几个用户发布了他们暂时使用的实现，https://github.com/vuetifyjs/vuetify/issues/238

Answer 2

Vue JS 直到今天还没有文件输入功能，因此您可以调整 v-text-field 使其像图像输入字段一样工作。概念是，创建一个文件输入字段，然后使用 css 将其隐藏，并在 v-text-field 中添加一个事件以触发该特定文件输入字段以上传图像。我附上了 sn-p，请你玩一下，我也有一个使用 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>

最新版本 (V2.0.5) 在编辑这篇日期为 2019 年 8 月 11 日的帖子时，有一个专用的文件输入选项。请点击以下链接获取官方文档：https://vuetifyjs.com/en/components/file-inputs.

Answer 3

一个简单的技巧是：

<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 这隐藏了输入

然后制作一个按钮，当您单击它时，它会在输入上传按钮上触发一个单击事件。

Answer 4

好消息。

从版本 2.0.0.-beta.8 v-file-input 开始在 Vuetify 中可用。你应该像这样使用它：

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

编辑（片段添加）：

处理图像文件的基本用法可以实现如下。

感谢@Begueradj 指出，甚至不需要处理@change 事件来跟踪文件更改并使示例更加精确：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    file: null,
    imageUrl: null
  }),
  methods: {
    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/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/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/*"
        ></v-file-input>
        <v-btn color="primary" @click="onUpload">Upload</v-btn>
      </v-container>
    </v-content>
  </v-app>
</div>