vue+elementui 批量上傳excel webapi后台接收並保存到數據庫

效果圖：

 

 

 

 

 上傳窗口：

<el-dialog title="上傳部件" :visible.sync="isEditWinShow" custom-class="customWidth" :close-on-click-modal="false">
                <el-form label-width="100px">
                    <el-row>
                        <el-col :span="24">
                            <el-upload ref="upload" action="#" :limit="200" multiple accept=".xls,.xlsx" :on-change="handleChange"
                             :on-remove="handleRemove" :on-exceed="handleExceed" :file-list="fileList" :http-request="uploadFile"
                             :auto-upload="false">
                                <el-button slot="trigger" type="primary" size="small" align="right">選取文件</el-button>
                                </el-button>
                                <el-button type="success" style="margin-left: 100px;" size="small" @click="submitUpload">上傳到服務器</el-button>
                                <div slot="tip" class="el-upload__tip">只能上傳xlsx文件，且不超過700KB</div>
                            </el-upload>
                        </el-col>
                    </el-row>
                </el-form>
            </el-dialog>

// 導入exel
            async importExcel() {
                this.isEditWinShow = true;
            },
            // 上傳文件
            uploadFile(file) {
                this.fileData.append('files', file.file);
            },
            submitUpload() {
                const loading = this.$loading({
                    lock: true,
                    text: '數據提取中，請稍后',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                if (this.fileList.length === 0) {
                    this.$message({
                        message: '請先選擇文件',
                        type: 'warning'
                    });
                } else {
                    const isLt700K = this.fileList.every(file => file.size / 1024 / 1024 / 1024 < 700);
                    if (!isLt700K) {
                        this.$message.error('請檢查，上傳文件大小不能超過700KB!');
                    } else {
                        var formData = new FormData(); //  用FormData存放上傳文件
                        this.fileList.forEach(file => {
                            formData.append('partsInfoFile', file.raw, file.raw.name);
                        })
                           //向webapi發起請求，等待后台接收
                        axios.post(axiosbaseUrl_ex + '/PartsInfo/upload/', formData, {
                                headers: {
                                    'Content-Type': 'multipart/form-data'
                                }
                            })
                            .then((response) => {
                                    if (response.status == "200") {
                                        setTimeout(() => {
                                            loading.close();
                                            this.getPartsList();
                                            this.$message({
                                                type: 'success',
                                                message: '導入成功!'
                                            });
                                            this.getPartsList();
                                            this.fileList = [];
                                            this.fileData = "";
                                            this.isEditWinShow = false;
                                            this.isLoading = false;
                                        }, 1000);
                                    } else {
                                        this.$message({
                                            type: 'error',
                                            message: '導入失敗，請檢查模板是否正確'
                                        });
                                        this.isLoading = false;
                                    }
                                },
                                error => {
                                    loading.close();
                                    this.$message.error('系統異常，請稍后再試');
                                    return Promise.reject(error);
                                }
                            )
                    }
                }
            },
            //移除
            handleRemove(file, fileList) {
                this.fileList = fileList;
            },
            // 選取文件超過數量提示
            handleExceed(files, fileList) {
                this.$message.warning(`當前限制選擇200個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + fileList.length} 個文件`);
            },
            //監控上傳文件列表
            handleChange(file, fileList) {
                let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
                if (existFile) {
                    this.$message.error('當前文件已經存在!');
                    fileList.pop();
                }
                this.fileList = fileList;
            }

fileData: '', // 文件上傳數據（多文件合一）
fileList: [], // upload多文件數組

以上為data中聲明的變量

 webapi如何接收：

   [DescriptionName("上傳部件信息")]
        [HttpPost, Route("PartsInfo/upload")]
        public ResultModel UploadPartsInfo()
        {
            ResultModel res = new ResultModel();
            HttpFileCollection fileList = System.Web.HttpContext.Current.Request.Files;
            // 判斷是否有上傳的文件
            if (fileList == null || fileList.Count == 0)
            {
                res.message = "請先選擇要上傳的文件！";
                return res;
            }

            #region 將上傳的所有的excel文件保存在一個臨時文件夾中
            string dicName = string.Format("PartsInfo_{0}", DateTime.Now.ToString("yyyyMMddHHmmss"));
            string filePath = TempFilePath + dicName;
            FileHelper.CreateDirectory(filePath);
            for (int i = 0; i < fileList.Count; i++)
            {
                HttpPostedFile uploadFile = fileList[i];
                // 判斷文件的格式是否是.xlsx或者.xls
                string suffix = Path.GetExtension(uploadFile.FileName);
                List<string> fileTypeList = new List<string>() { ".xlsx", ".xls" };
                if (!fileTypeList.Contains(suffix))
                {
                    res.message = "上傳文件的后綴名必須是“.xlsx”或！“.xls”";
                    return res;
                }
                string newFileName = string.Format("{0}/{1}", filePath, uploadFile.FileName);
                uploadFile.SaveAs(newFileName);
            }
            #endregion

            #region 讀取存儲的臨時文件並保存入庫
            try
            {
                string[] tempfileList = FileHelper.GetFileNames(filePath);
                foreach (var file in tempfileList)
                {
                    Thread t = new Thread(this.ReadExcel);
                    t.Start(file);
                }
                res = new ResultModel()
                {
                    status = "1",
                    message = "導入成功"
                };
            }
            catch (Exception)
            {
                res = new ResultModel()
                {
                    status = "-1",
                    message = "導入失敗"
                };
            }

            #endregion

            return res;
        }

多線程讀取臨時文件

 string errMsg = string.Empty;

        /// <summary>
        /// 讀取某個excel文件
        /// </summary>
        /// <param name="filePath"></param>
        private void ReadExcel(object filePath)
        {
            try
            {
                HSSFWorkbook workbook;
                using (FileStream file = new FileStream(filePath.ToString(), FileMode.Open, FileAccess.ReadWrite))
                {
                    workbook = new HSSFWorkbook(file);
                    file.Close();
                }
                if (workbook.NumberOfSheets < 2)
                {
                    errMsg = "請檢查上傳的部件數據是否正確";
                    return;
                }
                var sheet = workbook.GetSheetAt(0);

                //讀取裝置序列號
                string indexNum = sheet.GetRow(2).GetCell(3).StringCellValue;
                if (string.IsNullOrEmpty(indexNum))
                {
                    //如果第3行第4個單元格 的值是空的話，再讀取第5行第4個單元格的值作為裝置序列號
                    indexNum = sheet.GetRow(4).GetCell(3).StringCellValue;
                }
                //根據讀取的裝置序列號獲取設備信息
                BizBaseInfoBll baseInfoBll = new BizBaseInfoBll();
                var baseInfo = baseInfoBll.GetByIndexNum(indexNum);
                List<BizPartInfo> newList = new List<BizPartInfo>();
                if (baseInfo != null)
                {
                    var colSheet = workbook.GetSheetAt(1);
                    //獲取模板的內容區域
                    int rowCount = colSheet.LastRowNum;
                    BizPartInfo model = new BizPartInfo();
                    //從excel模板的第9行開始讀取
                    for (int i = 1; i <= rowCount; i++)
                    {
                        //獲取模板的第三列數據 作為部件名稱
                        ICell cell = colSheet.GetRow(i).GetCell(2);
                        if (cell == null)
                        {
                            break;
                        }
                        //獲取模板的第四列數據 作為部件序列號
                        ICell cell4 = colSheet.GetRow(i).GetCell(3);
                        ICell cell2 = colSheet.GetRow(i).GetCell(1);
                        if (cell4.CellType == CellType.Formula)
                        {
                            cell4.SetCellType(CellType.String);
                        }
                        string cell4Str = cell4.StringCellValue;
                        if (cell2.CellType == CellType.Numeric)
                        {
                            cell2.SetCellType(CellType.String);
                        }
                        string cell2Str = cell2.StringCellValue;
                        int partNo = 0;
                        Int32.TryParse(cell2Str, out partNo);
                        //SysUser curUser = CommonUtil.GetLoginUser();
                        if (cell != null && !string.IsNullOrEmpty(cell.StringCellValue))
                        {
                            //將讀取的模板數據組裝成部件信息
                            model = new BizPartInfo()
                            {
                                MachineIndex = indexNum,
                                IsDel = false,
                                PartName = cell.StringCellValue,
                                PartNo = partNo,
                                PartIndex = cell4Str,
                                // CreateUser = curUser.UserId,
                                CreateDate = DateTime.Now
                            };
                            newList.Add(model);
                        }
                    }
                }
                partsInfoBll.ImportPart(indexNum, newList);
            }
            catch (Exception)
            {
            }
        }