.Net WebApi+ElementPlus实现附带数据的文件上传
|
admin
2024年9月16日 20:56
本文热度 1953
|
前后端分离项目，数据交互都知道怎么做，文件上传应该也都知道。但是存在有些情况下，我们需要将文件和数据同时提交。ElementPlus的upload上传组件提供了可携带数据的data属性，但是在.NetWebApi下应该如何做接收呢？下面通过示例我们简单实现一下。开发环境：.NET 6
开发工具：Visual Studio 2022
- 这里假设我们已经有了一个Vue3项目，并且引入了ElementPlus。
- 首先是前端的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>
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(); });};
- 上面的代码就会在提交的时候将数据和内容直接给到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;}
该文章在 2024/9/18 12:26:33 编辑过
400 186 1886
