正文 

当前位置： 首页 > 问答 >

如何在 Nuxt.js 中使用 v-file-input 获取文件对象？

     2023-02-22     82

关键词：

【中文标题】如何在 Nuxt.js 中使用 v-file-input 获取文件对象？【英文标题】：How to get file object using v-file-input in Nuxt.js? 【发布时间】：2021-03-19 04:22:17 【问题描述】：

我使用了 Vuetify.js 作为 Nuxt.Js 的 UI 框架。 当我输入文件我的应用程序时，我想获取文件对象。 所以我在 Vuetify.Js 中使用了 v-file-input 组件 我编写了如下代码。

    <template>
    <div>
        <v-file-input
            label="fileinput"
            multiple
            v-model="files"
            @change="getFileObject()"></v-file-input>    
    </div>    
</template>
<script lang="ts">
import  Component, Vue  from 'nuxt-property-decorator'

@Component()
export default class extends Vue
    files:any = []
    fileObj:any = 
    async getFileObject(file:any)
        this.fileObj = await file
        console.log(this.fileObj)
    

</script>

我使用 console.log 检查了文件对象。 但“this.fileObj”未定义。 输入文件时如何获取文件对象？ 谁能给我建议？

【问题讨论】：

看这里：***.com/questions/44989162/file-upload-in-vuetify 【参考方案1】：

如果你从处理程序中删除空参数，它应该被隐式传递。它也应该在this.files 上，用作输入的v-model：

@change="getFileObject"

methods: 
  getFileObject(file:any) 
    console.log(file);
    console.log(this.files)

【讨论】：

【参考方案2】：

@change 事件有一个参数，即文件数组：

  @change="getFileObject($event)"></v-file-input>

然后在脚本中：

     async getFileObject(files:File[])
         this.fileObj = await files
        console.log(this.fileObj)

【讨论】：

非常感谢您的回答！我意识到我需要像您的回答一样将一个参数放入事件处理程序中。 非常感谢！ 不客气，@change="getFileObject($event)" 允许您根据需要传递其他参数，files:File[] 强制输入 我想像 TypeScript 一样编写来强制输入，但我没有任何想法来归档对象。我真的明白。非常感谢！

如何使用 laravel 后端 API 在 nuxt.js 中上传图片

】如何使用laravel后端API在nuxt.js中上传图片【英文标题】：howtouploadimageinnuxt.jsusinglaravelbackendAPI【发布时间】：2021-01-2407:29:30【问题描述】：nuxt.js我搜索了很多关于使用laravelapi上传图片的教程，但我不知道如何编码图片上传的东... 查看详情

如何在 Nuxt.js 中使用 CKEditor - 未定义窗口错误

】如何在Nuxt.js中使用CKEditor-未定义窗口错误【英文标题】：HowtouseCKEditorwithNuxt.js-windowisnotdefinederror【发布时间】：2020-08-1503:00:36【问题描述】：在Vue.js中，这是我使用的设置。在Nuxt.js中，我收到“未定义窗口”错误。根据我的... 查看详情

如何在 Nuxt.js 中使用官方 Swiper.js 作为插件

】如何在Nuxt.js中使用官方Swiper.js作为插件【英文标题】：HowtouseofficialSwiper.jsasplugininNuxt.js【发布时间】：2021-01-2106:39:49【问题描述】：我有插件swiper.js代码：importVuefrom"vue";//importSwipercoreandrequiredcomponentsimportSwiperCore,Navigation,Pagina... 查看详情

如何使用 jest 在 nuxt.js 中测试 head()

】如何使用jest在nuxt.js中测试head()【英文标题】：Howtotesthead()innuxt.jsusingjest【发布时间】：2020-05-1418:26:53【问题描述】：我正在使用带有Jest的Nuxt.js进行单元测试。我在布局中添加了一个head函数来更改标题，我想对其进行单元测... 查看详情

如何在 nuxt.js 中定义路由

】如何在nuxt.js中定义路由【英文标题】：Howtodefinerouteinnuxt.js【发布时间】：2019-04-2421:11:53【问题描述】：我有一个使用Nuxt.Js的博客网站，假设xyz.com并希望显示特定国家/地区代码的所有页面，例如xyz.com/en/home、xyz.com/en/about等。... 查看详情

如何在 nuxt js 中使用 vuetify 作为插件？

】如何在nuxtjs中使用vuetify作为插件？【英文标题】：Howtousevuetifyinnuxtjsasplugin?【发布时间】：2020-04-2321:43:53【问题描述】：我需要在我的nuxtjs项目中使用vuetify作为插件。我试过包@nuxtjs/vuetify，但得到错误无法分配给对象“#”的... 查看详情

如何使用 Nuxt.js 在 vuex 状态中获取本地存储数据

】如何使用Nuxt.js在vuex状态中获取本地存储数据【英文标题】：HowtogetlocalstoragedatainsidevuexstatewithNuxt.js【发布时间】：2019-06-1113:32:09【问题描述】：我正在使用Nuxt构建一个购物车。但是当我刷新页面时，购物篮会自动清空。我尝... 查看详情

如何在实际服务中运行 nuxt.js？

】如何在实际服务中运行nuxt.js？【英文标题】：Howtorunnuxt.jsinrealservice?【发布时间】：2017-10-2817:56:32【问题描述】：我在中使用了vue-clivueinitnuxt/expressmyProject和，npm运行开发开发。但是，npm运行构建之后，创建了dist文件。如何在... 查看详情

如何在 Nuxt.js (Vue.js) 中使用 vue-infinite-loading

】如何在Nuxt.js(Vue.js)中使用vue-infinite-loading【英文标题】：Howtousevue-infinite-loadinginNuxt.js(Vue.js)【发布时间】：2017-10-2807:01:42【问题描述】：我在Nuxt.js(Vue.js)中开发网络应用程序首先，vueinitnuxt/expressMyProject~page/help.vue<template><... 查看详情

如何在 Nuxt.js 中使用 v-file-input 获取文件对象？

】如何在Nuxt.js中使用v-file-input获取文件对象？【英文标题】：Howtogetfileobjectusingv-file-inputinNuxt.js?【发布时间】：2021-03-1904:22:17【问题描述】：我使用了Vuetify.js作为Nuxt.Js的UI框架。当我输入文件我的应用程序时，我想获取文件对... 查看详情

如何在 Nuxt.js Nuxt/Content 博客中使用内容文件夹中的图像设置 og:image

】如何在Nuxt.jsNuxt/Content博客中使用内容文件夹中的图像设置og:image【英文标题】：Howtosetog:imageinNuxt.jsNuxt/Contentblogwithimagesincontentfolders【发布时间】：2021-11-1613:54:36【问题描述】：如何获取已部署图像的最终位置的字符串表示形... 查看详情

如何在 Nuxt 中拥有像 turn.js 这样的翻书？

】如何在Nuxt中拥有像turn.js这样的翻书？【英文标题】：Howtohaveaflipbookliketurn.jsinNuxt?【发布时间】：2021-12-2015:34:39【问题描述】：如何将turn.js导入nuxt.js项目。当我通过插件使用时，错误窗口未定义，即使我在客户端模式下使用... 查看详情

如何使用 Nuxt.js 从缓存中排除组件？

】如何使用Nuxt.js从缓存中排除组件？【英文标题】：HowtoexcludecomponentfromcachingusingNuxt.js?【发布时间】：2021-08-1411:18:15【问题描述】：我正在尝试在Nuxt.js中使用Vue.jskeep-aliveprop，我正在尝试缓存除一个之外的所有组件，这是我想... 查看详情

如何将 BootstrapVue 在 Nuxt.js 中使用 Purgecss 所需的所有内容列入白名单

】如何将BootstrapVue在Nuxt.js中使用Purgecss所需的所有内容列入白名单【英文标题】：HowdoIwhitelisteverythingIneedforBootstrapVuetoworkwithPurgecssinNuxt.js【发布时间】：2020-02-0506:39:23【问题描述】：我创建了一个Nuxt.js项目，它使用BootstrapVue作... 查看详情

如何在 nuxt.js 中编写全局路由器功能

】如何在nuxt.js中编写全局路由器功能【英文标题】：howtowriteglobalrouter-functioninnuxt.js【发布时间】：2018-01-1213:11:55【问题描述】：我正在将Vue.js与Nuxt.js一起使用，但路由器的功能出现问题。在纯Vue中，我可以这样写main.js：valroute... 查看详情

如何在 nuxt js Autodesk forge 查看器中使用 IconMarkupExtension？

】如何在nuxtjsAutodeskforge查看器中使用IconMarkupExtension？【英文标题】：HowtousetheIconMarkupExtensioninnuxtjsautodeskforgeviewer?【发布时间】：2020-09-2202:21:52【问题描述】：我试图按照示例使用IconMarkupExtension，https://forge.autodesk.com/blog/placing-c... 查看详情

在现有 Nuxt.js 项目中使用 Express.js

...想使用express来报告我的asyncData方法等的bugsnag错误。我将如何导入它？我想并不像npminstallexpress--save那样简单。我已经有一个用PHP编写的api， 查看详情

如何在nuxt.js中实现handsontable

】如何在nuxt.js中实现handsontable【英文标题】：Howtoimplementhandsontableintonuxt.js【发布时间】：2020-06-2608:31:04【问题描述】：我正在尝试在我使用的项目上安装handsontablenpminstallhandsontable@handsontable/vue也许我需要创建一个插件？如何在... 查看详情