.net code+vue 文件上传
后端技术
.net code 官方文档 https://docs.microsoft.com/zh-cn/aspnet/core/mvc/models/file-uploads?view=aspnetcore-3.1
上传方式:multipart/form-data
其他参数:Name,Version,Type
方法1:自定义解析
[ApiController]
[Route("api/[controller]")]
public class UploadController : ControllerBase
{
private const string fileRootPath = "D://files";
[HttpPost]
[DisableFormValueModelBinding]
[Route("UploadFile")]
public async Task<ApiResult<FileUploadResponse>> UploadFile()
{
FileUploadResponse datas = new FileUploadResponse();
var reader = new MultipartReader(HeaderUtilities.RemoveQuotes((MediaTypeHeaderValue.Parse(Request.ContentType)).Boundary).Value, HttpContext.Request.Body);
MultipartSection section = await reader.ReadNextSectionAsync();
while (section != null)
{
try
{
if (!ContentDispositionHeaderValue.TryParse(section.ContentDisposition, out var contentDisposition)
|| contentDisposition == null
|| !contentDisposition.DispositionType.Equals("form-data"))
{
continue;
}
using (var memoryStream = new MemoryStream())
{
await section.Body.CopyToAsync(memoryStream);
string fileName = contentDisposition.FileName.Value;
string name = contentDisposition.Name.Value;
if (string.IsNullOrWhiteSpace(fileName))
{
var encoding = GetEncoding(section);
string value = encoding.GetString(memoryStream.ToArray());
datas.Propertys.Add(new KeyValuePair<string, string>(name, value));
continue;
}
fileName = Guid.NewGuid().ToString("N") + Path.GetExtension(fileName);
datas.FileNames.Add(fileName);
using (var targetStream = System.IO.File.Create(Path.Combine(fileRootPath, fileName)))
{
await targetStream.WriteAsync(memoryStream.ToArray());
}
}
}
finally
{
section = await reader.ReadNextSectionAsync();
}
}
return ResultState.Success(datas);
}
}
移除.netCode默认
[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method)]
public class DisableFormValueModelBindingAttribute : System.Attribute, IResourceFilter
{
public void OnResourceExecuting(ResourceExecutingContext context)
{
var factories = context.ValueProviderFactories;
factories.RemoveType<FormValueProviderFactory>();
factories.RemoveType<FormFileValueProviderFactory>();
factories.RemoveType<JQueryFormValueProviderFactory>();
}
public void OnResourceExecuted(ResourceExecutedContext context)
{
}
}
返回值模型类
public class FileUploadResponse
{
public List<KeyValuePair<string, string>> Propertys { get; set; } = new List<KeyValuePair<string, string>>();
public List<string> FileNames { get; set; } = new List<string>();
}
方法二:使用IFormFile
[ApiController]
[Route("api/[controller]")]
public class UploadController : ControllerBase
{
private const string fileRootPath = "D://files";
[HttpPost]
[Route("UploadFiles")]
public async Task<ApiResult<FileUploadResponse>> UploadFiles([FromForm]FileUploadRequest data)
//(IFormFile file, [FromForm] string name, [FromForm] string version, [FromForm] FileUploadType type)
//([FromForm]List<IFormFile> files, [FromForm]string name)
{
var result = new FileUploadResponse();
result.Propertys.Add(new KeyValuePair<string, string>("Name", data.Name));
result.Propertys.Add(new KeyValuePair<string, string>("Version", data.Version));
result.Propertys.Add(new KeyValuePair<string, string>("Type", data.Type)); string suffix = Path.GetExtension(data.File.FileName);
string fileName = data.File.FileName + "_" + Guid.NewGuid().ToString("N") + suffix;
using (var stream = new FileStream(Path.Combine(fileRootPath, fileName), FileMode.Create))
{
await data.File.CopyToAsync(stream);
}
result.FileNames.Add(fileName);
return ResultState.Success(result);
}
}
请求模型类和返回值模型类
public class FileUploadRequest
{
public IFormFile File { get; set; }
public string Name { get; set; }
public string Version { get; set; }
public string Type { get; set; }
}
public class FileUploadResponse
{
public List<KeyValuePair<string, string>> Propertys { get; set; } = new List<KeyValuePair<string, string>>();
public List<string> FileNames { get; set; } = new List<string>();
}
前端技术
前端采用vuex+element-ui
element-ui官网:https://element.eleme.cn/#/zh-cn/component/upload
方式1:el-upload action 提交
<template>
<div>
<el-form :model="form" :rules="rules" ref="form" label-width="150px">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请填写名称"/>
</el-form-item>
<el-form-item label="版本号" prop="version">
<el-input v-model="form.version" placeholder="请填写版本号"/>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-input v-model="form.type" placeholder="请填写类型"/>
</el-form-item>
<el-form-item label="上传文件" prop="path">
<el-upload
action="http://localhost:5001/api/FileUpload/UploadifyFile"
:before-upload="beforeUpload"
:show-file-list="false"
:data="extraData()"
:on-success="uploadSuccess"
>
<el-button size="small" type="primary">点击上传</el-button>
<span>{{this.form.path}}</span>
</el-upload>
</el-form-item>
</el-form>
<br>
</div>
</template> <script>
export default {
data() {
return {
rules: {
name: [ { required: true, message: "请填写名称", trigger: "blur" } ],
version: [ { required: true, message: "请填写版本号", trigger: "blur" } ],
type: [ { required: true, message: "请填写类型", trigger: "blur" } ],
path: [ { required: true, message: "请选择文件", trigger: "blur" } ]
},
form: {
name: undefined,
version: undefined,
type: undefined,
path: undefined
}
}
},
methods: {
extraData() {
return {
"name": this.form.name,
"version": this.form.version,
"type": this.form.type
}
},
uploadSuccess(response, file, fileList){
this.form.path = response.data.fileName;
},
beforeUpload(file)
{
if(this.form.name == null || this.form.name === ""){
this.$message.error('请填写名称');
return false;
}
if(this.form.version == null || this.form.version === ""){
this.$message.error('请填写版本号');
return false;
}
if(this.form.type == null || this.form.type === ""){
this.$message.error('请填写类型');
return false;
}
return true;
}
}
}
</script>
方法二:axios提交
<template>
<div>
<el-form :model="form" :rules="rules" ref="form" label-width="150px">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请填写名称"/>
</el-form-item>
<el-form-item label="版本号" prop="version">
<el-input v-model="form.version" placeholder="请填写版本号"/>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-input v-model="form.type" placeholder="请填写类型"/>
</el-form-item>
<el-form-item label="上传文件" prop="path">
<el-upload
action=""
:before-upload="beforeUpload"
:show-file-list="false"
:data="extraData()"
:http-request="handleHttpRequest">
<el-button size="small" type="primary">点击上传</el-button>
<span>{{this.form.path}}</span>
</el-upload>
</el-form-item>
</el-form>
<br>
</div>
</template> <script>
import axios from "axios";
export default {
data() {
return {
rules: {
name: [ { required: true, message: "请填写名称", trigger: "blur" } ],
version: [ { required: true, message: "请填写版本号", trigger: "blur" } ],
type: [ { required: true, message: "请填写类型", trigger: "blur" } ],
path: [ { required: true, message: "请选择文件", trigger: "blur" } ]
},
form: {
name: undefined,
version: undefined,
type: undefined,
path: undefined
}
}
},
methods: {
extraData() {
return {
"name": this.form.name,
"version": this.form.version,
"type": this.form.type
}
},
handleHttpRequest(fileDatas){
var fd = new FormData();
for (let prop in fileDatas.data) {
fd.append(prop, fileDatas.data[prop]);
}
fd.append("file", fileDatas.file); let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
} axios.post("http://localhost:5001/api/FileUpload/UploadifyFile", fd, config).then(response =>
{
console.log(response);
this.form.path = response.data.data.fileName;
});
},
beforeUpload(file)
{
if(this.form.name == null || this.form.name === ""){
this.$message.error('请填写名称');
return false;
}
if(this.form.version == null || this.form.version === ""){
this.$message.error('请填写版本号');
return false;
}
if(this.form.type == null || this.form.type === ""){
this.$message.error('请填写类型');
return false;
}
return true;
}
}
}
</script>
.net code+vue 文件上传的更多相关文章
- Spring Boot 2.x(十六):玩转vue文件上传
为什么使用Vue-Simple-Uploader 最近用到了Vue + Spring Boot来完成文件上传的操作,踩了一些坑,对比了一些Vue的组件,发现了一个很好用的组件--Vue-Simple- ...
- 测试开发实战[提测平台]17-Flask&Vue文件上传实现
微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 先回顾下在此系列第8次分享给出的预期实现的产品原型和需求说明,如下图整体上和前两节实现很相似,只不过一般测试报告要写的内容可能比较多,就多 ...
- vue文件上传
今天写一个文件上传的功能,开始想用element-ui的组件写,但是发现不知道怎么把文件标题和内容一起上传,所以用了经典的input框上传. 废话不多说,直接上代码. 这是表单: <el-for ...
- vuetify | vue | 文件上传组件 | file | upload | form input[type="file"]
今天无聊地写vuecli3听歌的时候,遇到了上传文件到Django的自我需求,然后就到vuetify的表单组件里找upload btn,发现居然没有!!! 顿时惊了个呆,要知道之前用element做操 ...
- vue文件上传及压缩(canvas实现压缩)
// 读取文件结果 afterRead(files) { let that = this; let file = files.file; if (file === undefined) { retur ...
- vue文件上传控件
下载地址:https://pan.baidu.com/s/1Z3pFh2J3xWa8YYnLoseasg 使用方式: <upload ref='upload' action-url='' :mu ...
- 文件上传利器SWFUpload使用指南(转)
http://www.cnblogs.com/2050/archive/2012/08/29/2662932.html 文件上传利器SWFUpload使用指南 SWFUpload是一个flash和js ...
- SWFUpload文件上传详解
SWFUpload是一个flash和js相结合而成的文件上传插件,其功能非常强大. SWFUpload的特点: 1.用flash进行上传,页面无刷新,且可自定义Flash按钮的样式; 2.可以在浏览器 ...
- SwfUpload文件上传
SWFUpload是一个flash和js相结合而成的文件上传插件,其功能非常强大.以前在项目中用过几次,但它的配置参数太多了,用过后就忘记怎么用了,到以后要用时又得到官网上看它的文档,真是太烦了.所以 ...
随机推荐
- Hibernate Tools插件在线安装
1.查看你的Eclipse的版本:Help | About Eclipse Version: Oxygen.2 Release(4.11.0) 2.HibernateTools的下载地址为:http: ...
- oracle rm -fr datafile 数据文件被误删的场景恢复(没有rman备份)
环境: Linux release 7.5 oracle19c (无pdb,从11.2.0.4升级上去的) 一:单个非系统表空间的数据文件被删除 我先备份一下,虽然是测试环境. [oracle@19c ...
- Python字符串常用的一些东西
字符串的常用方法dir(str).查看某一方法的用法help(str.xxx). 1,索引和切片: 2,len():查看字符串的总长度. 3,+,拼接一个或多个字符串. 4,in,判定字符是否在字符串 ...
- JS拼接字符串太长希望换行保持html格式拼接的方法
1. 通常情况 tabPeoStr +='<tr class="tabPeo"><td>'+data[i].name+'</td><td& ...
- Core3.0读取appsetting.json中的配置参数
前言 方法很多,下面的例子也是从百度上搜索到的,原文链接已经找不到了. 方法1 1.添加NovelSetting节点,写入相关的配置信息 2.创建类,字段与上面的配置一致 3.StartUp.cs中获 ...
- VS中使用RDLC提示类型不一致
问题描述 错误"基类包括字段"XXXXXXX",但其类型(Microsoft.Reporting.WebForms.ReportViewer)与控件(Microsoft. ...
- Sentinel并发限流不精确-之责任链
在之前调研Sentinel的过程中,为了准备分享内容,自己就简单的写了一些测试代码,不过在测试中遇到了一些问题,其中有一个问题就是Sentinel流控在并发情况下限流并不精确,当时我还在想,这个我 ...
- [LeetCode]231. Power of Two判断是不是2\3\4的幂
/* 用位操作,乘2相当于左移1位,所以2的幂只有最高位是1 所以问题就是判断你是不是只有最高位是1,怎判断呢 这些数-1后形成的数,除了最高位,后边都是1,如果n&n-1就可以判断了 如果是 ...
- Adnc如何本地调试 - 一个轻量级的.Net Core微服务开发框架
前言 Adnc是一个轻量级的.Net Core微服务开发框架,同样适用于单体架构系统的开发. 如果只是想本地调试,只需要安装必备软件,必备软件除开发工具外,其它软件建议大家都使用`do ...
- String被final修饰
源码: