Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件
在开发Web应用程序中,文件上传是经常用到的一个功能。
在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的。
简单列一下我们要做的技术点和功能点
使用技术
客户端使用vue.js 3.0,并使用vue3新增的功能:Composition API ,服务器使用asp.net core
功能点
- 标签美化
- 文件预览
- 文件上传
- 服务器接收文件
文件选择美化
在标准的html文件选择标签,是十分不美观的。大概就是下图的样子
但是我们的设计师的设计图可不是这样的啊,所以第一步是选择美化一下样式。
标签美化
找遍整个搜索引擎,美化文件选择标签只有两种方法
- 设置input标签透明度为0,然后定位一个其他的容易修改样式的标签到透明度度为0的input标签上。
- 设置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>
在Composition api中要获取到标签的ref,不能使用this.$refs来获取。当然,你如果喜欢使用vue2的options api。那依然可以使用this.$refs来获取标签的el
只需要简单的触发input的click事件,就可以使浏览器弹出文件选择框了。
文件预览
基本上所有的文件上传组件,都有预览上传图片的功能。本文所写的上传组件当然也不例外。
监听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(
"load",
(event) => {
console.log(event);
data.imgList.push({
base64: event.target.result,
});
},
false
);
fileReader.readAsDataURL(file);
}
};
在Chromium内核等高版本浏览器中,无法像低版本浏览器一样,能获得文件的具体磁盘路径。如果像以前用文件路径去获取文件。只能获得一个 C:\fakepath"+文件名的路径。无法获取到真实文件路径。据说可以通过某些方法获取真实路径。我试过,没成功。有兴趣的朋友可以试试。
文件上传
选择文件后,我们需要把文件保存到到服务器。在传统的多页面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);
xhr.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.GetExtension(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中是非常简单的。只需要简单配置一下即可
如果在IIS或者Nginx下,就需要修改对应站点的配置文件了。当然具体服务器软件的配置不在本篇文章的讨论之下。有需要的同学可以私下交流
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文件上传组件开发到这里就结束了。
更多干货,以及本文的示例代码, 欢迎关注我的公众号: 青城同学 回复 文件上传 获取下载地址
当然也可以扫码
欢迎转载,请注明出处以及不要随意删改内容
Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件的更多相关文章
- 一个简单的QQ隐藏图生成算法 通过jQuery和C#分别实现对.NET Core Web Api的访问以及文件上传
一个简单的QQ隐藏图生成算法 隐藏图不是什么新鲜的东西,具体表现在大部分社交软件中,预览图看到的是一张图,而点开后看到的又是另一张图.虽然很早就看到过这类图片,但是一直没有仔细研究过它的原理,今天 ...
- ASP.NET Core WEB API 使用element-ui文件上传组件el-upload执行手动文件文件,并在文件上传后清空文件
前言: 从开始学习Vue到使用element-ui-admin已经有将近快两年的时间了,在之前的开发中使用element-ui上传组件el-upload都是直接使用文件选取后立即选择上传,今天刚好做了 ...
- BootStrap fileinput.js文件上传组件实例代码
1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...
- Bootstrap fileinput.js,最好用的文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link ty ...
- vue大文件上传组件选哪个好?
需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...
- JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...
- 通过jQuery和C#分别实现对.NET Core Web Api的访问以及文件上传
准备工作: 建立.NET Core Web Api项目 新建一个用于Api请求的UserInfo类 public class UserInfo { public string name { get; ...
- Asp.net core 学习笔记 ( upload/download files 文件上传与下载 )
更新 : 2018-01-22 之前漏掉了一个 image 优化, 就是 progressive jpg refer : http://techslides.com/demos/progressi ...
- resumable.js —— 基于 HTML 5 File API 的文件上传组件 支持续传后台c#实现
在git上提供了java.nodejs.c#后台服务方式:在这里我要用c#作为后台服务:地址请见:https://github.com/23/resumable.js 我现在visual studio ...
随机推荐
- 如何使用二维码进行表白-一键制作二维码,gif二维码制作
" 如何使用二维码进行表白-一键制作二维码" 二维码在我们现在生活中随处可见,因为一次突发奇想,那我们可不可以制作一个自己的二维码呢!然后让女朋友去扫描一下----嘿嘿嘿--不行, ...
- 7种jvm垃圾回收器,这次全部搞懂
前言 之前我们讲解了jvm的组成结构与垃圾回收算法等知识点,今天我们来讲讲jvm最重要的堆内存是如何使用垃圾回收器进行垃圾回收,并且如何使用命令去配置使用这些垃圾回收器. 堆内存详解 上面这个图大家应 ...
- python3-day1
一.python的优缺点: 先看优点 Python的定位是"优雅"."明确"."简单",所以Python程序看上去总是简单易懂,初学者学Py ...
- NoActionBar主题下如何添加OptionsMenu
菜单无法显示 为了不显示标题栏,所以主题使用了 NoActionBar,这也直接导致选项菜单无处显示 解决方案 添加一个ToolBar,自定义标题栏 <androidx.appcompat.wi ...
- mysql-2-where
#进阶2:条件查询 /* 语法: SELECT 查询列表 FROM 表名 WHERE 筛选条件 分类: 1.按条件表达式筛选:> < = != <> >= <= 2 ...
- 中部:执具 | R语言数据分析(北京邮电大学)自整理笔记
第5章工欲善其事.必先利其器 代码,是延伸我们思想最好的工具. 第6章基础编程--用别人的包和函数讲述自己的故事 6.1编程环境 1.R语言的三段论 大前提:计算机语言程序=算法+数据结构 小前提:R ...
- linux 漏洞列表
#CVE #Description #Kernels CVE-2017-1000367 [Sudo](Sudo 1.8.6p7 - 1.8.20) CVE-2017-7494 [Samba Remot ...
- matlab中floor 朝负无穷大四舍五入
来源:https://ww2.mathworks.cn/help/matlab/ref/floor.html?searchHighlight=floor&s_tid=doc_srchtitle ...
- 【比赛记录】8.21 div2
A 选择一个点\(B(x,0)\)使得\(|dis(A,B)-x|=k.\) 题目实际上就是找到一个最接近\(n\)的数,使得它可以分成两个数\(a,b,\)使\(a-b=k.\) 我们考虑先分成一个 ...
- 【Flutter Widgets大全】电子书开源
[Flutter Widgets大全]是老孟耗费大量精力整理的,总共有330多个组件的详细用法,开源到Github上,希望可以帮助到大家,开源不易,点个赞可不可以. [Flutter Widgets ...