.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>