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

前言

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

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

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

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

原理

实现的原理其实并不复杂，只需要使用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的这个方法，只有在选择文件后点击打开才会调用，如果点击了取消是不会调用的

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

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

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