一、後臺Api操作

下載包: MiniExcel

下載包:Dapper.SimpleCRUD

下載包:Z.Dapper.Plus

引用

using System.IO;
using System.Linq;
using MiniExcelLibs;
using MiniExcelLibs;

1、Dal資料訪問層

        /// <summary>
        /// 匯入 上傳 Excel
        /// </summary>
        /// <param name="user"></param>
        ///
 
 <returns></returns>
        public int Uploading(List<UserModel> user)
        {
            using (var conn = new SqlConnection(_configuration.GetConnectionString("MSSQL")))
            {
                var list = conn.BulkInsert(user);
                if(list!=null)
                {
                    
 
return 1;
                }
                else
                {
                    return 0;
                }
            }
        }

2、Bll業務邏輯層

        /// <summary>
        /// 匯入 上傳 Excel
        /// </summary>
        /// <param name="user"></param>
        /// <returns></returns>
 

        public int Uploading(List<UserModel> user)
        {
            try
            {
                return _userAllocationDal.Uploading(user);
            }
            catch (Exception)
            {

                throw;
            }
        }

3、UI表現層 (控制器)

        /// <summary>
        ///  匯入 上傳 Excel
        /// </summary>
        /// <param name="user"></param>
        /// <returns></returns>
        [HttpPost]
        public IActionResult Uploading()
        {
            try
            {
                var excel = this.HttpContext.Request.Form.Files[0];
                var stream = new MemoryStream();
                excel.CopyTo(stream);
                var list = stream.Query<UserModel>().ToList();
                return Ok(_userAllocationBll.Uploading(list));
            }
            catch (Exception)
            {

                throw;
            }
        }

/// <summary>
        /// 下載 匯出 Excel 只有UI層
        /// </summary>
        /// <returns></returns>
       [HttpGet]
        public IActionResult DownloadExcel()
        {
            
            var totalCount = 0;
            //根據你所選中的方法 寫要求  分頁如下   無要求為空
            var values = _userAllocationBll.AllShowUser( out totalCount, 1,10);
            var memoryStream = new MemoryStream();
            memoryStream.SaveAs(values.ToList());
            memoryStream.Seek(0, SeekOrigin.Begin);
            return new FileStreamResult(memoryStream, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")
            {
                FileDownloadName = "demo.xlsx"
            };
        }

二、前臺Vue

<template>
  <div>
    <!--上傳Excel-->
    <el-button type="text" @click="dialogFormVisible = true"
      ><el-button>上傳資料</el-button></el-button
    >
    <el-dialog title="上傳" :visible.sync="dialogFormVisible">
      <el-upload
        class="upload-demo"
        drag
        :on-success=upchuan
        action="http://localhost:307**/api/User/Uploading"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">將檔案拖到此處，或<em>點選上傳</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上傳jpg/png檔案，且不超過500kb
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >確 定</el-button
        >
      </div>
    </el-dialog>
    <!--下載按鈕-->
    <el-button @click="loachuan()">下載</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
    };
  },
  methods: {
      //上傳
    upchuan(res) {
      if (res == 1) {
        this.$message.success("上傳Excel成功");
        this.dialogFormVisible = false;
      } else {
        this.$message.success("上傳Excel失敗");
      }
    },
    //下載
    loachuan()
    {
        if(confirm("是否確定下載"))
        {
            window.open("http://localhost:307**/api/User/DownloadExcel")
        }
    }
  },
};
</script>

<style>
</style>

效果圖

......待續