vue3.0+.netcore实现文件上传组件-创新互联

这期内容当中小编将会给大家带来有关vue3.0+.net core实现文件上传组件，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

使用技术

客户端使用vue.js 3.0，并使用vue3新增的功能:Composition API ,服务器使用asp.net core

功能点

1. 标签美化
2. 文件预览
3. 文件上传
4. 服务器接收文件
    

文件选择美化

在标准的html文件选择标签，是十分不美观的。大概就是下图的样子

但是我们的设计师的设计图可不是这样的啊，所以第一步是选择美化一下样式。

标签美化

找遍整个搜索引擎，美化文件选择标签只有两种方法

1. 设置input标签透明度为0，然后定位一个其他的容易修改样式的标签到透明度度为0的input标签上。
2. 设置input标签的display为none，然后使用JavaScript来触发当前input的点击事件。

因为笔者最近在做基于vue.js 3.0的项目，需要自己自定义很多UI组件，所以参考了layui element ，它们都是使用第二种方式来美化文件选择标签。

假设我们UI设计图是上图的样式，如果需要美化，只需要隐藏文件选择的Input标签。然后放置一个按钮，然后设置按钮的样式为设计图上的样式即可

 

  选择文件