文章摘要
这篇文章介绍了使用.NET 6.0和Vue 3实现数据导入功能的全过程。文章详细描述了两种主要的文件导入方式：前端上传文件到后端处理，以及前端读取数据后发送至后端存储。通过创建相应的接口、编写Vue组件以及使用RESTful API进行数据处理，作者展示了完整的实现过程。
文章还提供了前端和后端的交互示例，包括文件上传和数据验证的代码实现，特别是处理Excel文件内容转换的部分。这些代码展示了如何将前端选择的文件内容转换为公司数据，并通过RESTful API实现数据存储和展示。
文章整体结构清晰，涵盖了从需求分析到代码实现的全貌，展示了如何通过前后端结合实现高效的文件导入功能。总结来说，这篇文章通过具体的代码实现，详细讲解了数据导入功能的开发过程。
目录前言1. 前端上传文件到后台进行数据存储1.1编写文件上传接口1.2存储上传文件路径，读取数据并进行存储1.3前端Vue建立创建列表数据页面，包含表格功能及分页功能1.4调用接口获取表格数据方法1.5后台开发数据返回接口1.6主页面创建上传文件组件并进行引用1.7FleUpload页面主要上传文件到服务器，并回调父页面存储接口1.8这里的title，accept参数由父页面传值过来，可以进行组件复用1.9提交保存时回调父页面存储数据方法1.10父页面方法调用接口进行数据存储,存储成功后关闭子页面1.11后台数据存储接口2前端读取数据，发送读取数据到后台进行数据存储2.1创建上传数据组件并引用2.2DataUpload页面主要读取选择文件数据，并进行展示2.3文件上传成功方法，保存数据到临时变量进行分页处理2.4数据绑定到表格上，这里需要通过当前选择页码及页面显示数量处理需要绑定到表格上的数据2.5点击确认导入按钮回调父页面方法进行数据保存2.6父页面方法调用接口进行数据存储，存储成功后关闭子页面2.7后台数据存储接口总结
在开发的过程中，上传文件或者导入数据是一件很常见的事情，导入数据可以有两种方式：
前端上传文件到后台，后台读取文件内容，进行验证再进行存储前端读取数据，进行数据验证，然后发送数据到后台进行存储这两种方式需要根据不同的业务才进行采用
这次用.Net6.0+Vue3来实现一个数据导入的功能
接下来分别用代码来实现这两种方式
[DisableRequestSizeLimit]
[HttpPost]
public IActionResult Upload()
{
var files=Request.Form.Files;
long size=files.Sum(f=> f.Length);
string contentRootPath=AppContext.BaseDirectory;
List<string> filenames=new List<string>();
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);
}
这里只是上传文件分了两步走，第一步把文件上传到服务器，第二步调用接口把返回的文件路径发送给后台进行数据保存
/// <summary>
/// 上传文件数据
/// </summary>
/// <param name=”uploadStuInfoInput”></param>
/// <returns></returns>
[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<CompanyImportInput>(filePath).ToList();
companies.AddRange(row.Select(x=> new Company { Name=x.名称, Address=x.地址 }));
return Ok(“导入成功!”);
}
<el-table :data=”state.tableData.data”>
? ? ? <el-table-column v-for=”item in state.colunm” :prop=”item.key” :key=”item.key” :label=”item.lable”>
? ? ? </el-table-column>
? ? </el-table>
?<div class=’block flex justify-end’ v-if=’state.tableData.total > 0′>
? ? ? <el-pagination v-model:currentPage=”state.searchInput.PageIndex” v-model:page-size=”state.searchInput.PageSize”
? ? ? ? :page-sizes=”[10, 50, 200, 1000]” layout=”total, sizes, prev, pager, next, jumper” @size-change=”getData”
? ? ? ? @current-change=”getData” :total=”state.tableData.total” />
? ? </div>
const getData=()=> {
? ? ? axios.get(‘/Company’, { params: state.searchInput }).then(function (response) {
? ? ? ? state.tableData=response.data;
? ? ? })
? ? }
[HttpGet]
public dynamic Get([FromQuery] SelectInput selectInput)
{
return new
{
total=companies.Count(),
data=companies.Skip((selectInput.pageIndex – 1) * selectInput.pageSize).Take(selectInput.pageSize).ToList()
};
}
import FileUpload from ‘@/components/FileUpload.vue’;
并绑定子页面回调方法fileUploadchildClick
<FileUpload ref=”fileUpload” @childClick=”fileUploadchildClick” accept=”.xlsx” title=”上传文件”></FileUpload>
<el-dialog :close-on-click-modal=”false” v-model=”state.dialogVisible” :title=”title” width=”40%”>
? ? <el-form :model=’state.formData’ label-width=’130px’ class=’dialogForm’>
? ? ? <el-upload class=’upload-demo’ :limit=”1″ drag :accept=’accept’ :file-list=’state.fileList’ :show-file-list=’true’
? ? ? ? :on-success=’fileUploadEnd’ :action=’fileUploadUrl()’>
? ? ? ? <i class=’el-icon-upload’></i>
? ? ? ? <div class=’el-upload__text’>将文件拖到此处，或<em>点击上传</em></div>
? ? ? ? <div class=’el-upload__tip’>请选择({{ ?accept ?}})文件</div>
? ? ? </el-upload>
? ? ? <div>
? ? ? ? <el-form-item>
? ? ? ? ? <el-button type=’primary’ @click=’submit’>导入</el-button>
? ? ? ? ? <el-button @click=’cancel’>取消</el-button>
? ? ? ? </el-form-item>
? ? ? </div>
? ? </el-form>
? </el-dialog>
选择文件成功回调方法
const fileUploadEnd=(response, file)=> {
? ? ? state.fileresponse=file.name;
? ? ? state.formData.filePath=response[0];
? ? ? if (state.fileList.length > 0) {
? ? ? ? state.fileList.splice(0, 1);
? ? ? }
? ? }
const submit=()=> {
? ? ? if (state.formData.filePath==”) {
? ? ? ? ElMessage.error(‘请选择上传的文件’)
? ? ? ? return;
? ? ? }
? ? ? context.emit(‘childClick’, state.formData)
? ? }
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)
? ? ? ? }
? ? ? })
? ? }
/// <summary>
/// 上传文件数据
/// </summary>
/// <param name=”uploadStuInfoInput”></param>
/// <returns></returns>
[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<CompanyImportInput>(filePath).ToList();
companies.AddRange(row.Select(x=> new Company { Name=x.名称, Address=x.地址 }));
return Ok(“导入成功!”);
}
import DataUpload from ‘@/components/DataUpload.vue’;
并绑定子页面回调方法dataUploadchildClick
<DataUpload ref=”dataUpload” @childClick=”dataUploadchildClick” accept=”.xlsx” title=”上传数据”></DataUpload>
<el-dialog :close-on-click-modal=”false” v-model=”state.dialogVisible” :title=”title” width=”50%”>
? ? <el-upload class=”upload-demo” :action=’accept’ drag :auto-upload=”false” :on-change=”uploadChange” :limit=”1″>
? ? ? <i class=”el-icon-upload”></i>
? ? ? <div class=”el-upload__text”>将文件拖到此处，或<em>点击上传</em></div>
? ? </el-upload>
? ? <div>
? ? ? <el-form-item>
? ? ? ? <el-button @click=’submit’>确认导入</el-button>
? ? ? </el-form-item>
? ? </div>
? ? <el-table :data=”state.tableData.data”>
? ? ? <el-table-column v-for=”item in state.colunm” :prop=”item.key” :key=”item.key” :label=”item.lable”>
? ? ? </el-table-column>
? ? </el-table>
? ? <div class=’block flex justify-end’ v-if=’state.tableData.total > 0′>
? ? ? <el-pagination v-model:currentPage=”state.searchInput.PageIndex” v-model:page-size=”state.searchInput.PageSize”
? ? ? ? :page-sizes=”[10, 50, 200, 1000]” layout=”total, sizes, prev, pager, next, jumper” @size-change=”getData”
? ? ? ? @current-change=”getData” :total=”state.tableData.total” />
? ? </div>
? </el-dialog>
const uploadChange=async (file)=> {
? ? ? let dataBinary=await readFile(file.raw)
? ? ? let workBook=XLSX.read(dataBinary, { type: ‘binary’, cellDates: true })
? ? ? let workSheet=workBook.Sheets[workBook.SheetNames[0]]
? ? ? let data: any=XLSX.utils.sheet_to_json(workSheet)
? ? ? let tHeader=state.colunm.map(obj=> obj.lable)
? ? ? let filterVal=state.colunm.map(obj=> obj.key)
? ? ? tHeader.map(val=> filterVal.map(obj=> val[obj]))
? ? ? const tempData: any=[];
? ? ? data.forEach((value)=> {
? ? ? ? const ob={};
? ? ? ? tHeader.forEach((item, index)=> {
? ? ? ? ? ob[filterVal[index]]=value[item].toString();
? ? ? ? })
? ? ? ? tempData.push(ob);
? ? ? })
? ? ? state.tempTableData=tempData;
? ? ? getData();
? ? }
const getData=()=> {
? ? ? const tempData: any=[];
? ? ? state.tempTableData.forEach((value, index)=> {
? ? ? ? if (index >=((state.searchInput.PageIndex – 1) * state.searchInput.PageSize) && index < ((state.searchInput.PageIndex) * state.searchInput.PageSize)) {
? ? ? ? ? tempData.push(value);
? ? ? ? }
? ? ? });
? ? ? state.tableData.data=tempData;
? ? ? state.tableData.total=state.tempTableData.length;
? ? }
const submit=()=> {
? ? ? context.emit(‘childClick’, state.tempTableData)
? ? }
const dataUploadchildClick=(data)=> {
? ? ? axios.post(‘/Company’, data)
? ? ? ? .then(function (response) {
? ? ? ? ? if (response.status==200) {
? ? ? ? ? ? ElMessage.success(response.data);
? ? ? ? ? ? dataUpload.value.cancel();
? ? ? ? ? ? getData();
? ? ? ? ? } else {
? ? ? ? ? ? ElMessage.error(response.data)
? ? ? ? ? }
? ? ? ? })
? ? }
/// 上传数据
/// </summary>
/// <param name=”uploadStuInfoInput”></param>
/// <returns></returns>
[HttpPost]
public IActionResult Post(List<Company> companiesInput)
{
companies.AddRange(companiesInput);
return Ok(“保存成功!”);
}
最后关于这个数据导入的功能就完成了，代码中有很多得伪代码，而且很多功能还待完善，后续再进行补充
附上git地址：https://gitee.com/wyf854861085/file-upload.git
Git演示图：
到此这篇关于.Net6.0+Vue3实现数据简易导入功能的文章就介绍到这了,更多相关.Net Vue3数据导入功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！