LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

.Net WebApi+ElementPlus实现附带数据的文件上传

admin
2024年9月16日 20:56 本文热度 517
前言

    
    前后端分离项目,数据交互都知道怎么做,文件上传应该也都知道。但是存在有些情况下,我们需要将文件和数据同时提交。ElementPlus的upload上传组件提供了可携带数据的data属性,但是在.NetWebApi下应该如何做接收呢?下面通过示例我们简单实现一下。
 
 



开发环境:.NET 6

开发工具:Visual Studio 2022

 

实现步骤
  1. 这里假设我们已经有了一个Vue3项目,并且引入了ElementPlus。
  2. 首先是前端的html代码,这里我们需要同时将数据内容和文件上传到后台,如下:
    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">          <el-form-item label="数据内容" prop="Value">            <el-input v-model="formData.Value" :autosize="{ minRows: 8, maxRows: 16 }" type="textarea" clearable></el-input>          </el-form-item>        </el-col>
           <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">          <el-form-item label="选择文件" prop="Name">            <el-input v-model="formData.Name" readonly>              <template #append>                <el-upload                  ref="uploadRef"                  :action="upload.action"                  :headers="upload.headers"                  :show-file-list="false"                  :on-change="onUploadChange"                  :before-upload="onUploadBefore"                  :on-success="onUploadSuccess"                  :on-error="onUploadError"                  :auto-upload="false"                  :data="formData"                  accept=".txt"                >                  <el-button type="primary">选择文件</el-button>                </el-upload>              </template>            </el-input>          </el-form-item>        </el-col>

  1. 接下来是vue代码:
    const uploadRef = ref<UploadInstance>();const formData = ref({  Name: '',  Value: '',});const onUploadChange = (file: any) => {  formData.value.Name = file.name;};const onUploadBefore = (file: any) => {  if (file.name.lastIndexOf('.txt') != file.name.length - 4) {    EMsg.error('请选择文本文件');    return false;  }  return true;};const onUploadSuccess = (res: any) => {  EMsg(res);  onClose();  emit('refresh');};const onUploadError = (res: any) => {  EMsg.error(res.Msg);};//提交按钮触发const onSubmit = () => {    uploadRef.value!.submit();  });};

  1. 上面的代码就会在提交的时候将数据和内容直接给到WebApi,WebApi接收代码如下:
    //先定义一个接收类public class InFileData    {        public string Name {  get; set; }        public string Value { get; set; }        public IFormFile? file { get; set; }    }
    [HttpPost]public ApiJsonResult Add([FromForm] InFileData input){    if (input.file == null)    {        return ApiJsonResult.Convert(false,"没有文件");    }    string filter = Path.GetExtension(input.Name);    string name = Guid.NewGuid().ToString("N") + filter;    string path = Path.Combine(App.StaticData.UploadPath, name);    using var stream = new FileStream(path, FileMode.OpenOrCreate);    input.file.CopyTo(stream);    //获取到的表单数据    string value=input.Value;
       return ApiJsonResult.Success;}

  1. 完成 
实现效果

 ???点击此处下载源码???


该文章在 2024/9/18 12:26:33 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved