如何在vue项目中做一个漂亮的文件上传按钮

4,208 阅读1分钟

前言

我们都知道,html原生的input标签将type设置为file就可以在网页中选择文件并上传

<input id="file-selector" type="file" />

只需要一行代码即可实现如下效果

image.png

但是原生的样式实在是太丑了,无法满足我们的需求,本文将展示如何实现一个属于自己的文件上传按钮

原理

实现的原理其实并不复杂,只需要使用display属性将原生的input标签隐藏掉,再使用另外一个按钮来调用input标签即可

实现

因为我们是在vue中实现的,所以我默认你拥有vue的基础知识

<!-- html -->
     <input
       id="file-selector"
       ref="uploadInput"
       type="file"
       @change="uploadFile"
       style="display: none"
     />
     <button class="自定义样式" @click="selectFile">上传文件</button>

id和type属性是原生就拥有的,ref是为了能拿到当前input标签。@change的这个方法,只有在选择文件后点击打开才会调用,如果点击了取消是不会调用的

image.png

// js
    ...
    methods:{
        // 选择文件
        selectFile() {
          this.$refs.uploadInput.click();
        },

        // 上传文件
        uploadFile(e) {
          // 拿到选择上传的文件
          const file = e.target.files[0];
          // 执行上传文件操作
          ...
        },    
    
    }

image.png

这样,你就可以自己制作漂亮的文件上传按钮了