vue3.0搭配.net core实现文件上传组件


Posted in Javascript onOctober 29, 2020

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

使用技术

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

功能点

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

文件选择美化

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

vue3.0搭配.net core实现文件上传组件

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

标签美化

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

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

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

vue3.0搭配.net core实现文件上传组件

假设我们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);
   }
  };

vue3.0搭配.net core实现文件上传组件

在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);
   });
  };

vue3.0搭配.net core实现文件上传组件

服务器接收

在服务器编程中,我们使用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文件夹中看到上传的图片文件了。

vue3.0搭配.net core实现文件上传组件

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

本篇vue 3.0文件上传组件开发到这里就结束了。

以上就是vue3.0搭配.net core实现文件上传组件的详细内容,更多关于vue3.0 文件上传的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 Javascript
使用jQuery实现购物车
Oct 29 #jQuery
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 #Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 #Javascript
node.js爬虫框架node-crawler初体验
Oct 29 #Javascript
JavaScript实现网页计算器功能
Oct 29 #Javascript
Javascript数组及类数组相关原理详解
Oct 29 #Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 #Javascript
You might like
怎样辨别一杯好咖啡
2021/03/03 新手入门
php接口和抽象类使用示例详解
2014/03/02 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
完善的jquery处理机制
2016/02/21 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
js实现日历的简单算法
2017/01/24 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
python操作redis的方法
2015/07/07 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
Python字典底层实现原理详解
2019/12/18 Python
python super函数使用方法详解
2020/02/14 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
公司授权委托书
2014/04/04 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL