如何使用Vue3.0与.NET Core构建文件上传功能组件？

本文共计1755个文字，预计阅读时间需要8分钟。

在开发Web应用程序时，文件上传是一个常用功能。在jQuery时代，实现上传功能通常只需找到一个合适的jQuery插件即可。但很少有人深入探究上传插件背后的实现原理。以下简要介绍我们需要做的技术要点。

在开发Web应用程序中，文件上传是经常用到的一个功能。
在Jquery时代，做上传功能，一般找jQuery插件就够了，很少有人去探究上传文件插件到底是怎么做的。
简单列一下我们要做的技术点和功能点

使用技术

客户端使用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的点击事件。