首先,先看我个人的项目结构。

这个webapi项目是专门作为图片上传的业务处理,而其中分为两个控制器:单图片上传和多图片上传。在接下来的内容主要还是针对单文件上传,对于多文件的上传,我暂且尚未研究成功。

其中pictureoptions类,由于我把关于图片上传相关的配置项(保存路径、限制的文件类型和大小)写在了配置文件中,所以接下来会通过依赖注入的方式,注入到这个类中

接下来,正式开工

第一步,配置文件的设置

"PictureOptions": {
"FileTypes": ".gif,.jpg,.jpeg,.png,.bmp,.GIF,.JPG,.JPEG,.PNG,.BMP",
"MaxSize": ,
"ImageBaseUrl": "G:\\dotnet\\imageServer\\evaluate"
}

然后在项目根目录下新建PictureOptions类

     public class PictureOptions
{
/// <summary>
/// 允许的文件类型
/// </summary>
public string FileTypes { get; set; }
/// <summary>
/// 最大文件大小
/// </summary>
public int MaxSize { get; set; }
/// <summary>
/// 图片的基地址
/// </summary>
public string ImageBaseUrl { get; set; }
}

第二步,依赖注入

services.Configure<PictureOptions>(Configuration.GetSection("PictureOptions"));

在SingleImageUploadController中构造注入

这里要注意,你要把Cors跨域配置好,关于跨域,可以前往阅读我的另一篇博文

第三步,构建POST api

在element-ui中关于upload组件的api说明文档,可以发现一个非常重要的信息

upload组件他实际是通过提交form表单的方式去请求url

所以,后台这边,我们也是要通过form表单,获取上传的文件,具体代码如下:

         /// <summary>
/// 上传文件
/// </summary>
/// <param name="file">来自form表单的文件信息</param>
/// <returns></returns>
[HttpPost]
public IActionResult Post([FromForm] IFormFile file)
{
if (file.Length <= this._pictureOptions.MaxSize)//检查文件大小
{
var suffix = Path.GetExtension(file.FileName);//提取上传的文件文件后缀
if (this._pictureOptions.FileTypes.IndexOf(suffix) >= )//检查文件格式
{
CombineIdHelper combineId = new CombineIdHelper();//我自己的combine id生成器
using (FileStream fs = System.IO.File.Create($@"{this._pictureOptions.ImageBaseUrl}\{combineId.CreateId()}{suffix}"))//注意路径里面最好不要有中文
{
file.CopyTo(fs);//将上传的文件文件流,复制到fs中
fs.Flush();//清空文件流
}
return StatusCode(, new { newFileName = $"{combineId.LastId}{suffix}" });//将新文件文件名回传给前端
}
else
return StatusCode(, new { msg = "不支持此文件类型" });//类型不正确
}
else
return StatusCode(, new { msg = $"文件大小不得超过{this._pictureOptions.MaxSize / (1024f * 1024f)}M" });//请求体过大,文件大小超标
}

第四步,配置前端vue项目

         <el-upload
action="http://192.168.43.73:5008/api/SingleImageUpload"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>

然后是method

   data () {
return {
dialogImageUrl: '',
dialogVisible: false,
images: []
}
},
methods: {
handleRemove (file, fileList) {
this.images.forEach((element, index, arr) => {
if (file.name === element.oldFile.name) {
arr.splice(index, 1)
}
})
console.log(this.images)
},
handlePictureCardPreview (file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
handleUploadSuccess (response, file, fileList) {
console.log(response)
console.log(file)
console.log(fileList)
this.images.push({
newFileName: response.newFileName, // 服务器端的新文件名,即后端回调过来的数据
oldFile: {
name: file.name, // 上传之前的文件名,客户端的
url: file.url // 页面显示上传的图片的src属性绑定用的
}
})
},
handleUploadError (response, file, fileList) {
this.$message.error(JSON.parse(response.message).msg)
}
}

这里面注意各个handle中频繁出现的三个参数:response 、 file 和 fileList

其中response,就是后端发送过来的数据

file:单文件上传时,他包含了该文件所有信息

fileList:指的是多文件上传所包含的文件信息

.net core3.1 webapi + element-ui upload组件实现文件上传的更多相关文章

  1. jquery组件WebUploader文件上传用法详解

    这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...

  2. 使用commons-fileupload-1.2.1.jar等组件实现文件上传

    使用的主要jar包:commons-io-1.3.2.jar包;commons-fileupload-1.2.1.jar包:commons-lang-2.3.jar,在使用组件实现文件上传时候要注意前 ...

  3. jsp实现文件上传(二)用cos组件实现文件上传

    jsp表单 <%@ page language="java" pageEncoding="utf-8"%> <html> <hea ...

  4. WordPress NextGEN Gallery ‘upload.php’任意文件上传漏洞

    漏洞名称: WordPress NextGEN Gallery ‘upload.php’任意文件上传漏洞 CNNVD编号: CNNVD-201306-259 发布时间: 2013-06-20 更新时间 ...

  5. layui的upload组件使用以及上传阻止测试

    背景:页面上一个按钮,点击弹出上传框,从按钮的方法代码开始写:处理未选择文件阻止上传:通过判断选择文件的数量,显示或隐藏上传按钮: 在js中定义: function  uploadFile(){ la ...

  6. MVC文件上传-使用jQuery.FileUpload和Backload组件实现文件上传

    本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: 处理文件上传的服务端组件Backload 用于处理文件上传的服务端组件 ...

  7. 百度Web Uploader组件实现文件上传(一)

    Web Uploader WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势 ...

  8. Java使用Commons-FileUpload组件实现文件上传最佳方案

    学习的目标 使用commons-fileupload实现文件上传 使用commons-fileupload封装文件上传工具类   什么是commons-fileupload? The CommonsF ...

  9. 模拟文件上传(二):使用apache fileupload组件进行文件上传

    其中涉及到的jar包: jsp显示层: <%@ page language="java" import="java.util.*" pageEncodin ...

随机推荐

  1. 聊下并发和Tomcat线程数(错误更正)

    本文前半部分结论存在严重错误,请看最后2015-1-20更新部分. 最近一直在解决线上一个问题,表现是: Tomcat每到凌晨会有一个高峰,峰值的并发达到了3000以上,最后的结果是Tomcat线程池 ...

  2. 使用JSONObject遇到的问题,java.lang.NoClassDefFoundError: net/sf/json/JSONObject

    先是报 java.lang.NoClassDefFoundError: net/sf/json/JSONObject 这个错误, 打开项目属性找到java build path中的libaries,找 ...

  3. tkinter 在 x window 下的字体设置格式

    X Font Descriptors # X Font Descriptors are strings having the following format (the asterisks repre ...

  4. laravel开发微信公众号1 之基本配置

    需要用到的packagist:       https://github.com/overtrue/laravel-wechat  ( 目前最优雅的laravel微信sdk) 首先安装 compose ...

  5. Solr学习笔记之1、环境搭建

    Solr学习笔记之1.环境搭建 一.下载相关安装包 1.JDK 2.Tomcat 3.Solr 此文所用软件包版本如下: 操作系统:Win7 64位 JDK:jdk-7u25-windows-i586 ...

  6. MySQL----数据的显示位宽

    问题:在MySQL表中的列可以定义它显示的位宽.那么定义了位宽会不会影响数据的取值范围呢? 测试: 1.定义一个用于测试的表 create table t(x int,y int(2),z int(2 ...

  7. Dubbo源码学习--服务发布(ServiceBean、ServiceConfig)

    前面讲过Dubbo SPI拓展机制,通过ExtensionLoader实现可插拔加载拓展,本节将接着分析Dubbo的服务发布过程. 以源码中dubbo-demo模块作为切入口一步步走进Dubbo源码. ...

  8. 深入理解springMVC思想

     转载:http://elf8848.iteye.com/blog/875830 深入理解Spring MVC 思想   目录  一.前言二.spring mvc 核心类与接口三.spring mvc ...

  9. .net core 2.x - 缓存的四种方式

    其实这些微软docs都有现成的,但是现在的人想对浮躁些,去看的不会太多,所以这里就再记录下 ,大家一起懒一起浮躁,呵呵. 0.基础知识 通过减少生成内容所需的工作,缓存可以显著提高应用的性能和可伸缩性 ...

  10. 【转】谷歌三大核心技术(三)Google BigTable中文版

      谷歌三大核心技术(三)Google BigTable中文版 摘要 Bigtable 是一个分布式的结构化数据存储系统,它被设计用来处理海量数据:通常是分布在数千台普通服务器上的PB级的数据.Goo ...