您现在的位置是:网站首页> 编程资料编程资料
.Net6.0+Vue3实现数据简易导入功能全过程_实用技巧_
2023-05-24
196人已围观
简介 .Net6.0+Vue3实现数据简易导入功能全过程_实用技巧_
前言
在开发的过程中,上传文件或者导入数据是一件很常见的事情,导入数据可以有两种方式:
- 前端上传文件到后台,后台读取文件内容,进行验证再进行存储
- 前端读取数据,进行数据验证,然后发送数据到后台进行存储
这两种方式需要根据不同的业务才进行采用
这次用.Net6.0+Vue3来实现一个数据导入的功能
接下来分别用代码来实现这两种方式
1. 前端上传文件到后台进行数据存储
1.1编写文件上传接口
[DisableRequestSizeLimit] [HttpPost] public IActionResult Upload() { var files = Request.Form.Files; long size = files.Sum(f => f.Length); string contentRootPath = AppContext.BaseDirectory; List filenames = new List(); foreach (IFormFile formFile in files) { if (formFile.Length > 0) { string fileExt = Path.GetExtension(formFile.FileName); long fileSize = formFile.Length; string newFileName = System.Guid.NewGuid().ToString() + fileExt; var filePath = contentRootPath + "/fileUpload/"; if (!Directory.Exists(filePath)) { Directory.CreateDirectory(filePath); } using (var stream = new FileStream(filePath + newFileName, FileMode.Create)) { formFile.CopyTo(stream); } filenames.Add(newFileName); } } return Ok(filenames); } 这里只是上传文件分了两步走,第一步把文件上传到服务器,第二步调用接口把返回的文件路径发送给后台进行数据保存
1.2存储上传文件路径,读取数据并进行存储
////// 上传文件数据 /// /// ///[HttpPut] public IActionResult Put(DataInput uploadStuInfoInput) { Encoding.RegisterProvider(CodePagesEncodingProvider.Instance); var filePath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "fileUpload", uploadStuInfoInput.filePath); if (!System.IO.File.Exists(filePath)) { return BadRequest("导入失败,文件不存在!"); } var row = MiniExcelLibs.MiniExcel.Query (filePath).ToList(); companies.AddRange(row.Select(x => new Company { Name = x.名称, Address = x.地址 })); return Ok("导入成功!"); }
1.3前端Vue建立创建列表数据页面,包含表格功能及分页功能
1.4调用接口获取表格数据方法
const getData = () => { axios.get('/Company', { params: state.searchInput }).then(function (response) { state.tableData = response.data; }) }1.5后台开发数据返回接口
[HttpGet] public dynamic Get([FromQuery] SelectInput selectInput) { return new { total = companies.Count(), data = companies.Skip((selectInput.pageIndex - 1) * selectInput.pageSize).Take(selectInput.pageSize).ToList() }; }1.6主页面创建上传文件组件并进行引用
import FileUpload from '@/components/FileUpload.vue';
并绑定子页面回调方法fileUploadchildClick
1.7FleUpload页面主要上传文件到服务器,并回调父页面存储接口
将文件拖到此处,或点击上传请选择({{ accept }})文件导入 取消
1.8这里的title,accept参数由父页面传值过来,可以进行组件复用
选择文件成功回调方法
const fileUploadEnd = (response, file) => { state.fileresponse = file.name; state.formData.filePath = response[0]; if (state.fileList.length > 0) { state.fileList.splice(0, 1); } }1.9提交保存时回调父页面存储数据方法
const submit = () => { if (state.formData.filePath == '') { ElMessage.error('请选择上传的文件') return; } context.emit('childClick', state.formData) }1.10父页面方法调用接口进行数据存储,存储成功后关闭子页面
const fileUploadchildClick = (e) => { axios.put('/Company', { filePath: e.filePath, }).then(function (response) { if (response.status == 200) { ElMessage.success(response.data); fileUpload.value.cancel(); getData(); } else { ElMessage.error(response.data) } }) }1.11后台数据存储接口
////// 上传文件数据 /// /// ///[HttpPut] public IActionResult Put(DataInput uploadStuInfoInput) { Encoding.RegisterProvider(CodePagesEncodingProvider.Instance); var filePath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "fileUpload", uploadStuInfoInput.filePath); if (!System.IO.File.Exists(filePath)) { return BadRequest("导入失败,文件不存在!"); } var row = MiniExcelLibs.MiniExcel.Query (filePath).ToList(); companies.AddRange(row.Select(x => new Company { Name = x.名称, Address = x.地址 })); return Ok("导入成功!"); }
2前端读取数据,发送读取数据到后台进行数据存储
2.1创建上传数据组件并引用
import DataUpload from '@/components/DataUpload.vue';
并绑定子页面回调方法dataUploadchildClick
2.2DataUpload页面主要读取选择文件数据,并进行展示
将文件拖到此处,或点击上传确认导入
2.3文件上传成功方法,保存数据到临时变量进行分页处理
const uploadChange = async (file) => { let dataBinary = await readFile(file.raw) let workBook = XLSX.read(dataBinary, { type: 'binary', c
相关内容
- .Net实现图片裁剪图片缩放及图片加水印详解_ASP.NET_
- .Net Core 配置文件读取IOptions,IOptionsMonitor,IOptionsSnapshot_ASP.NET_
- ASP.NET MVC使用typeahead.js实现输入智能提示功能_实用技巧_
- ASP.NET MVC实现城市或车型三级联动_实用技巧_
- ASP.NET MVC实现区域或城市选择_实用技巧_
- uniapp+.net core实现微信小程序获取手机号功能_实用技巧_
- 在Asp.net core项目中使用WebSocket_实用技巧_
- ASP.NET Core实现中间件的几种方式_实用技巧_
- .net程序开发IOC控制反转和DI依赖注入详解_ASP.NET_
- .NET 中配置从xml转向json方法示例详解_ASP.NET_
点击排行
本栏推荐
