后端技术

.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 文件上传的更多相关文章

  1. Spring Boot 2.x(十六):玩转vue文件上传

    为什么使用Vue-Simple-Uploader 最近用到了Vue + Spring Boot来完成文件上传的操作,踩了一些坑,对比了一些Vue的组件,发现了一个很好用的组件--Vue-Simple- ...

  2. 测试开发实战[提测平台]17-Flask&Vue文件上传实现

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 先回顾下在此系列第8次分享给出的预期实现的产品原型和需求说明,如下图整体上和前两节实现很相似,只不过一般测试报告要写的内容可能比较多,就多 ...

  3. vue文件上传

    今天写一个文件上传的功能,开始想用element-ui的组件写,但是发现不知道怎么把文件标题和内容一起上传,所以用了经典的input框上传. 废话不多说,直接上代码. 这是表单: <el-for ...

  4. vuetify | vue | 文件上传组件 | file | upload | form input[type="file"]

    今天无聊地写vuecli3听歌的时候,遇到了上传文件到Django的自我需求,然后就到vuetify的表单组件里找upload btn,发现居然没有!!! 顿时惊了个呆,要知道之前用element做操 ...

  5. vue文件上传及压缩(canvas实现压缩)

    // 读取文件结果 afterRead(files) { let that = this; let file = files.file; if (file === undefined) { retur ...

  6. vue文件上传控件

    下载地址:https://pan.baidu.com/s/1Z3pFh2J3xWa8YYnLoseasg 使用方式: <upload ref='upload' action-url='' :mu ...

  7. 文件上传利器SWFUpload使用指南(转)

    http://www.cnblogs.com/2050/archive/2012/08/29/2662932.html 文件上传利器SWFUpload使用指南 SWFUpload是一个flash和js ...

  8. SWFUpload文件上传详解

    SWFUpload是一个flash和js相结合而成的文件上传插件,其功能非常强大. SWFUpload的特点: 1.用flash进行上传,页面无刷新,且可自定义Flash按钮的样式; 2.可以在浏览器 ...

  9. SwfUpload文件上传

    SWFUpload是一个flash和js相结合而成的文件上传插件,其功能非常强大.以前在项目中用过几次,但它的配置参数太多了,用过后就忘记怎么用了,到以后要用时又得到官网上看它的文档,真是太烦了.所以 ...

随机推荐

  1. Hibernate Tools插件在线安装

    1.查看你的Eclipse的版本:Help | About Eclipse Version: Oxygen.2 Release(4.11.0) 2.HibernateTools的下载地址为:http: ...

  2. oracle rm -fr datafile 数据文件被误删的场景恢复(没有rman备份)

    环境: Linux release 7.5 oracle19c (无pdb,从11.2.0.4升级上去的) 一:单个非系统表空间的数据文件被删除 我先备份一下,虽然是测试环境. [oracle@19c ...

  3. Python字符串常用的一些东西

    字符串的常用方法dir(str).查看某一方法的用法help(str.xxx). 1,索引和切片: 2,len():查看字符串的总长度. 3,+,拼接一个或多个字符串. 4,in,判定字符是否在字符串 ...

  4. JS拼接字符串太长希望换行保持html格式拼接的方法

    1. 通常情况 tabPeoStr +='<tr class="tabPeo"><td>'+data[i].name+'</td><td& ...

  5. Core3.0读取appsetting.json中的配置参数

    前言 方法很多,下面的例子也是从百度上搜索到的,原文链接已经找不到了. 方法1 1.添加NovelSetting节点,写入相关的配置信息 2.创建类,字段与上面的配置一致 3.StartUp.cs中获 ...

  6. VS中使用RDLC提示类型不一致

    问题描述 错误"基类包括字段"XXXXXXX",但其类型(Microsoft.Reporting.WebForms.ReportViewer)与控件(Microsoft. ...

  7. Sentinel并发限流不精确-之责任链

    ​ 在之前调研Sentinel的过程中,为了准备分享内容,自己就简单的写了一些测试代码,不过在测试中遇到了一些问题,其中有一个问题就是Sentinel流控在并发情况下限流并不精确,当时我还在想,这个我 ...

  8. [LeetCode]231. Power of Two判断是不是2\3\4的幂

    /* 用位操作,乘2相当于左移1位,所以2的幂只有最高位是1 所以问题就是判断你是不是只有最高位是1,怎判断呢 这些数-1后形成的数,除了最高位,后边都是1,如果n&n-1就可以判断了 如果是 ...

  9. Adnc如何本地调试 - 一个轻量级的.Net Core微服务开发框架

    前言     Adnc是一个轻量级的.Net Core微服务开发框架,同样适用于单体架构系统的开发.     如果只是想本地调试,只需要安装必备软件,必备软件除开发工具外,其它软件建议大家都使用`do ...

  10. String被final修饰

    源码: