Vue.js 3.0搭配.NET Core写一个文件上传组件

在开发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的点击事件。

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

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

<div class="uploader">
<button>选择文件</button>
<input type="file" placeholder="请选择文件" />
</div>

.uploader {
display: inline-block;
button {
background: #4e6ef2;
color: aliceblue;
padding: 5px;
outline: none;
border: none;
&:hover {
opacity: 0.8;
}
&:active {
opacity: 1;
}
}
input {
display: none;
}
}

美化完成组件后，我们需要用在button点击的时候，使用JavaScript去点击隐藏的input标签

<template>
<div class="uploader">
<button @click="btnClick">选择文件</button>
<input type="file" placeholder="请选择文件" ref="fileSelector" />
</div>
</template>

<script>
import { ref } from "vue";
export default {
name: "uploader",
setup() {
const fileSelector = ref(null);
const btnClick = () => {
fileSelector.value.click();
};
return {
fileSelector,
btnClick,
};
},
};
</script>

文件预览

基本上所有的文件上传组件，都有预览上传图片的功能。本文所写的上传组件当然也不例外。
监听input标签的change事件，获取到files对象。然后使用FileReader读取文件信息。

const fileChange = (e) => {
let files = e.target.files;
console.log(files);
for (let i = 0; i < files.length; i++) {
let file = files[i];
var fileReader = new FileReader();
fileReader.addEventListener(

56c
"load",
(event) => {
console.log(event);
data.imgList.push({
base64: event.target.result,
});
},
false
);
fileReader.readAsDataURL(file);
}
};

文件上传

选择文件后，我们需要把文件保存到到服务器。在传统的多页面web程序中，只需要设置按钮的type为submit，然后使用form表单直接提交文件和表单信息到服务器去。
但是我们做单页面程序，一般来说是通过JavaScript的ajax去上传文件。

const uploadServer = (file) => {
var form = new FormData();
form.append("file", file);
var xhr = new XMLHttpRequest();
xhr.open("post", props.server);
x
ad8
hr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
var res = JSON.parse(xhr.responseText);
console.log("上传成功");
data.logs.push({
log: res,
});
}
};
xhr.upload.onprogress = (event) => {
if (event.lengthComputable) {
var percent = (event.loaded / event.total) * 100;
console.log("上传进度:" + percent);
}
};
xhr.onerror = () => {
console.log("上传文件错误");
};
xhr.ontimeout = () => {
console.log("上传超时");
};
xhr.send(form);
};

在页面上新增一个按钮，用来手动触发上传

<div class="uploader">
<button @click="btnClick">选择文件</button>
<button @click="uploadClick">立即上传</button>
<input
type="file"
placeholder="请选择文件"
ref="fileSelector"
@change="fileChange"
multiple
/>
<div class="image-list">
<img v-for="(item, i) in data.imgList" :key="i" :src="item.base64" />
</div>
<div class="log">
<p v-for="(item, i) in data.logs" :key="i">{{ item.log }}</p>
</div>
</div>

点击 立即上传 按钮，触发上传

const uploadClick = () => {
data.files.forEach((file) => {
uploadServer(file);
});
};

服务器接收

在服务器编程中，我们使用C#来接收上传的文件。

/// <summary>
/// 上传
/// </summary>
/// <param name="files"></param>
/// <returns></returns>
[HttpPost("/upload")]
public async Task<IActionResult> Upload([FromServices] IWebHostEnvironment host)
{
var files = Request.Form.Files;
long size = files.Sum(f => f.Length);
List<string> list = new List<string>();
foreach (var formFile in files)
{
if (formFile.Length > 0)
{
var path = Path.Combine(host.WebRootPath, "files");

if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
string fileName = $"{Guid.NewGuid():N}{Path.GetExt
ad0
ension(formFile.FileName)}";
path = Path.Combine(path, fileName);
var filePath = path;

using var stream = System.IO.File.Create(filePath);
await formFile.CopyToAsync(stream);
var c = Path.VolumeSeparatorChar;
list.Add($"{Request.Scheme}://{Request.Host.Value}/{Path.Combine("files", fileName).Replace(Path.DirectorySeparatorChar, Path.AltDirectorySeparatorChar)}");
}
}

return Ok(new { list = list, size });
}

使用dotnet run运行asp.net core服务端。然后点击上传，你以为就上传成功了吗？
不！没那么简单。如果如果vue程序和asp.net core程序，不在同一个域名下，你还得处理上传跨域问题。当然这个问题在asp.net core中是非常简单的。只需要简单配置一下即可

app.UseCors(options =>
{
options.WithOrigins("http://localhost:3000", "http://127.0.0.1", "http://localhost:8080"); // 允许特定ip跨域
options.AllowAnyHeader();
options.AllowAnyMethod();
options.AllowCredentials();
});

以上配置必须要放在app.UseStaticFiles();之前才会生效。

上传成功后，你就会在服务器的wwwroot的files文件夹中看到上传的图片文件了。

本文完成了基本的功能，起一个抛砖引玉的作用。更多功能，如:文件类型限制，文件大小限制等，可以根据使用场景自定义扩展

本篇vue 3.0文件上传组件开发到这里就结束了。
更多干货，以及本文的示例代码， 欢迎关注我的公众号: 青城同学 回复 文件上传 获取下载地址
当然也可以扫码

欢迎转载，请注明出处以及不要随意删改内容