vue 中上传文件前如何进行校验

最近在开发过程中需要在页面上进行excel 文件的导入，因此想到使用input 的 <input type="file"> 来上传excel 文件。

但是在上传前需要进行校验，如下图所示：在选择新增巡检表这一项的时候，需要填写一个名称，然后才能导入文件。负责给出非空提示。

代码如下：在给上传文件的input标签上添加一个透明的div然后控制它的存在。

选择文件
   

      
    

这样就不会出现既有提示信息同时还打开文件弹出窗的情况。