vue实现文件上传mp4_.NET Core 3.1 WebAPI+Vue+Element UI实现文件上传

(给DotNet加星标,提升.Net技能)

转自: 吕小不 cnblogs.com/shapman/p/12272120.html

前言

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

33870ad52714bfd0e23cc73961a89777.png

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

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

第一步,配置文件的设置

71ea3681ddfe0918cb0d0e4f5bff011a.png

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

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

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

第二步,依赖注入

2a8e672dde9fbdaae2a33582e1ed311e.png

servicesConfiguration

在SingleImageUploadController中构造注入

1de0b4dd6f19a767e876ca31d346b5b8.png

这里要注意,你要把Cors跨域配置好,关于跨域《.NET Core WebAPI + vue.js + axios 实现跨域》,可以前往阅读我的另一篇博文

第三步,构建POST api

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

1838cf968b4ff705db2f7912103209ba.png

9e08879a182d38e1597b64d3f56538ba.png

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

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

/// 
/// 上传文件
///
/// 来自form表单的文件信息
///
[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) >= 0)//检查文件格式
{
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(200, new { newFileName = $"{combineId.LastId}{suffix}" });//将新文件文件名回传给前端
}
else
return StatusCode(415, new { msg = "不支持此文件类型" });//类型不正确
}
else
return StatusCode(413, new { msg = $"文件大小不得超过{this._pictureOptions.MaxSize / (1024f * 1024f)}M" });//请求体过大,文件大小超标
}

第四步 前端Vue项目

  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"
>
class="el-icon-plus">

"dialogVisible">"100%" :src="dialogImageUrl" alt />

然后是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 Core WebAPI + vue.js + axios 实现跨域

基于C# Task 自己动手写个异步IO函数

看完本文有收获?请转发分享给更多人

关注「DotNet」加星标,提升.Net技能 

a7e6e918848211ab01a90dac618fb477.png

好文章,我在看❤️

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页