vuetify | vue | 文件上传组件 | file | upload | form input[type=“file“]

最新推荐文章于 2025-07-09 14:23:59 发布

swallowblank

最新推荐文章于 2025-07-09 14:23:59 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/swallowblank/article/details/90705663

前端专栏收录该内容

61 篇文章

订阅专栏

本文介绍如何在Vuetify中使用自定义方法实现文件上传功能，通过结合Vue.js和Django，创建一个隐藏的HTML原生输入框并利用Vue的ref属性进行操作，实现点击美观的Vuetify按钮触发文件选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好了，当你看到这句话的时候，最新的vuetify已经有了自己的Upload组件。不过想了解自定义的朋友可以继续看看

<hr />

今天无聊地写vuecli3听歌的时候，遇到了上传文件到Django的自我需求，然后就到vuetify的表单组件里找upload btn，发现居然没有！！！

顿时惊了个呆，要知道之前用element做操作系统课设的时候，还是挺全的。

这里偷偷吐槽，vuetify的alert真的丑......

这里分享一个解决办法，挺简单的，网上好多办法都模棱两可，而且还有外国友人在npm发布了一个组件，名字我忘了，巨无敌难用。

1.直接上代码

 1 <template>
 2     <v-container>
 3         <v-layout>
 4             <v-flex>
 5                 <v-btn @click="upload" depressed>
 6                     Upload Image
 7                 </v-btn>
 8                 <input type="file" id="upload" ref="upload" @change="changeimg" accept=".jpg, .jpeg, .png">
 9             </v-flex>
10         </v-layout>
11     </v-container>
12 </template>
13 
14 <script>
15 import myService from '@/services/myService'
16 
17 export default {
18     components: {
19     },
20     data () {
21       return {
24       }
25     },
26     methods: {
27         upload () {
28             let uploadbtn = this.$refs.upload
29             uploadbtn.click()
30         },
31         async changeimg (e) {
32             let formData=new FormData()
33             formData.append('file', e.target.files[0])
34             await myServiece.fun(formData)
35             console.log('send')
36         }
37     }
38   }
39 </script>
40 
41 <style scoped>
42 #upload{
43     height: 0;
44     width: 0;
45     visibility: hidden;
46 }
47 </style>

加油，我相信你能看懂，嘻嘻

算了，我还是简单说一下吧....就是创建两个btn，第一个是好看的vuetify的，另一个是html原生的input（类型是file），然后把第二个用vue的ref记录下来，以便后面调用，并且用css隐藏起来。

给第一个btn绑定upload方法，当点击时，调用第二个btn的click事件，这样就有一个错觉，你懂吧，我懒得说了...自己看代码把

最后上效果图