时间戳

首页 > 解决方案 > Vuetify 文件上传

vue.js - Vuetify 文件上传

问题描述

我有一个使用 Vuetifyv-file-input组件的表单：

  <v-file-input chips multiple label="File(s)" v-model="file.files"></v-file-input>

我的数据对象如下所示：

 data: () => ({
    file: {
      files: null,
      directory: 0,
    }
 })

当我console.log表单数据files对象返回一个空对象。如何获取文件数据以将其传递给我的 Laravel 后端？

标签： vue.jsfile-uploadvuetify.js

解决方案

使用change事件和FileReader...

   <v-file-input chips multiple @change="addFiles()" 
          label="File(s)" v-model="file.files"></v-file-input>

   methods: {
        addFiles(){
            this.files.forEach((file, f) => {

                this.readers[f] = new FileReader();
                this.readers[f].onloadend = (e) => {

                    let fileData = this.readers[f].result
                    let imgRef = this.$refs.file[f]
                    imgRef.src = fileData
                    console.log(fileData)

                    // send to server here...
                }

                this.readers[f].readAsDataURL(this.files[f]);
            })
        },
    },

演示：https ://codeply.com/p/1K7sf12k0k

推荐阅读