vue怎么實現導入excel表功能

            <el-uploadref="upload":action="aaa":on-change="importProject"name="excelFile"multiple:auto-upload="false":show-file-list="false"><el-button type="warning">導入</el-button></el-upload>

action 屬性應是一個上傳地址 URL 字符串

action如果不用的話可以隨便傳一個參數,但是不能省略

multiple:能同時上傳多個表格

auto-upload="false":表示選擇文件后不自動上傳,而是通過按鈕點擊觸發上傳。

:show-file-list="false":不展示導入的文件名稱

    importProject(file) {const fd = new FormData()fd.append('file', file.raw)this.excelToJSONs(fd)//把文件傳給后端// console.log('文件', file)// console.log('fd', fd)}
 getMessage() {this.$refs.upload.clearFiles()},

this.$refs.upload.clearFiles():?清空上傳組件中的文件顯示,把這句話加在想清空文件顯示的函數里

可能的錯誤:

Required request part 'file' is not present

錯誤的代碼:fd.append('file', file)

原因:看似正確地添加了 file 字段,但傳入的是整個 file 對象(其實是 el-upload 返回的一個封裝對象),而不是原生的 File 對象。

解決:改為fd.append('file', file.raw)

Current request is not a multipart request

原因:通常是因為后端期望接收一個 multipart/form-data 格式的請求(即文件上傳格式),但前端發送的是其他格式(如 JSON)

解決:用FormData()

補充:

瀏覽器無法獲取用戶電腦上文件的“真實本地路徑”(如 C:\xxx\xxx.xlsx),這是出于安全機制。
可以獲取到的是:
文件對象 (File):用于讀取內容或上傳
文件名、大小、類型等基本信息
如果需要預覽,可以生成臨時 URL(URL.createObjectURL(file))

importProject(file) {console.log('完整文件對象:', file)// 文件名console.log('文件名:', file.name)// 文件大小(字節)console.log('文件大小:', file.size)// 文件類型console.log('文件類型:', file.type)// 保存原始 File 對象,供后續處理用this.selectedExcelFile = file.raw
}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/90878.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/90878.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/90878.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Linux DNS解析3 -- DNS解析代理配置使用

當網關設備配置了 /etc/hosts 文件時&#xff0c;確實可以為終端設備提供自定義DNS解析功能&#xff0c;但具體效果取決于網關的DNS代理服務配置。下面詳細解釋其工作原理和限制&#xff1a; 一、/etc/hosts 文件的作用 /etc/hosts 是本地靜態域名解析文件&#xff0c;格式為&a…

歷史版本的vscode下載地址

我有點厭惡vscode越來越臃腫的體積&#xff0c;也不需要層出不窮的新功能&#xff0c;于是網上找尋歷史版本。 首先是這個頁面&#xff1a;https://code.visualstudio.com/updates &#xff0c;但最多只顯示兩年&#xff0c;更早的就要手工修改地址欄&#xff0c;我試了最早的…

如何規范化項目執行

要實現項目執行的規范化&#xff0c;應做到以下幾點&#xff1a;制定詳細的項目執行計劃、明確項目團隊角色職責、建立高效溝通與協調機制、實施全面的質量與風險管理、采用合適的項目管理工具。其中&#xff0c;尤其重要的是明確項目團隊角色職責&#xff0c;通過構建清晰的責…

【Rust異步】async和await異步編程實戰:高并發任務處理全解析

?? 歡迎大家來到景天科技苑?? &#x1f388;&#x1f388; 養成好習慣&#xff0c;先贊后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者簡介&#xff1a;景天科技苑 &#x1f3c6;《頭銜》&#xff1a;大廠架構師&#xff0c;華為云開發者社區專家博主&#xff0c;…

在Linux上使用DuckCP實現從csv文件匯總數據到SQLite數據庫的表

從pypi網站Duckcp頁面下載duckcp-0.1.1-py3-none-any.whl 一開始用的Python 3.11.2環境。 繼續沿用上文打補丁的方法&#xff0c;得到一個支持python3.11.1的安裝包。 因為缺少zip壓縮工具&#xff0c;使用python程序來完成對修改后文件的重新壓縮。 import os import zipfile…

基于深度學習的圖像分類:使用EfficientNet實現高效分類

前言 圖像分類是計算機視覺領域中的一個基礎任務&#xff0c;其目標是將輸入的圖像分配到預定義的類別中。近年來&#xff0c;深度學習技術&#xff0c;尤其是卷積神經網絡&#xff08;CNN&#xff09;&#xff0c;在圖像分類任務中取得了顯著的進展。EfficientNet是一種新型的…

Java基礎-綜合案例

1、設計一個可以執行基本數學運算&#xff08;加減乘除&#xff09;的計算器程序功能描述&#xff1a;用戶輸入兩個數字、一個運算符&#xff08;、-、*、/&#xff09;。根據所選運算符執行相應的數學運算&#xff0c;顯示運算結果。import java.util.Scanner;public class Te…

四、計算機組成原理——第3章:存儲系統

目錄 3.1存儲器概述 3.1.1存儲器的分類 1.按在計算機中的作用(層次)分類 2.按存儲介質分類 3.按存取方式分類 4.按信息的可保存性分類 3.1.2存儲器的性能指標 3.2主存儲器 3.2.1SRAM芯片和DRAM芯片 1.SRAM的工作原理 2.DRAM的工作原理 3.SRAM和DRAM的比較 4.存儲器芯片的內部結…

3D Semantic Occupancy Prediction

3D 語義占用預測&#xff08;3D Semantic Occupancy Prediction&#xff09;旨在將真實世界環境劃分為規則的三維體素&#xff08;voxel&#xff09;網格&#xff0c;并對每個體素同時預測&#xff1a; 占用狀態&#xff08;Occupancy&#xff09;&#xff1a;該體素是否被物體…

在Word和WPS文字中添加的拼音放到文字右邊

在Word和WPS文字中&#xff0c;可以方便地為中文漢字添加拼音。默認的是拼音在漢字的上方&#xff0c;而且不方便直接編輯。可以簡單操作后把拼音放在漢字的右邊&#xff0c;并且可以方便地編輯。一、Word&#xff1a;先為漢字添加拼音&#xff0c;然后選擇性粘貼為純文本即可1…

Torchv Unstrustured 文檔解析庫

一個強大且開發者友好的文檔解析庫&#xff0c;專為RAG&#xff08;檢索增強生成&#xff09;應用優化。基于Apache Tika、Apache POI和PDFBox等業界標準Java庫構建&#xff0c;TorchV Unstructured提供了增強的解析能力&#xff0c;具備智能表格結構識別和內容提取功能。 &am…

30天入門Python(基礎篇)——第22天:面向對象之繼承與多繼承

目錄 專欄導讀 學習目標 1. 繼承的基本概念 1.1 繼承的優勢 2. 單繼承 2.1 基本語法 2.2 實際示例 3. super()函數詳解 3.1 基本用法 3.2 super()的高級用法 4. 多繼承 4.1 多繼承語法 4.2 多繼承示例 5. 方法解析順序(MRO) 5.1 查看MRO 5.2 復雜的MRO示例 6. 實際應用案例 6…

學習人工智能所需知識體系及路徑詳解

一、核心基礎知識體系1. 數學基礎線性代數關鍵概念&#xff1a;向量空間、矩陣運算&#xff08;轉置/逆矩陣&#xff09;、特征值分解、奇異值分解&#xff08;SVD&#xff09;應用場景&#xff1a;數據降維&#xff08;PCA&#xff09;、圖像處理&#xff08;矩陣變換&#xf…

前端實現銀河粒子流動特效的技術原理與實踐

文章目錄 1,引言 2,特效效果簡介 3,技術原理解析 1. 粒子系統基礎 2. 銀河結構的數學建模 3. 動態流動與旋轉 4,實現流程圖 5,關鍵代碼實現與詳細講解 1. 初始化Three.js場景 2. 生成銀河粒子數據 3. 創建粒子幾何體與材質 4. 實現粒子的動態旋轉與動畫 5. 可選:粒子顏色…

Qt_Gif_Creator 基于Qt的屏幕gif錄制工具

本文介紹了一個基于Qt框架的屏幕GIF錄制工具的實現。該工具包含XYGifCreator類負責GIF創建邏輯&#xff0c;使用Gif.h庫進行GIF編碼&#xff1b;XYGifFrame類提供GUI界面&#xff0c;支持設置錄制區域大小、幀率以及保存位置。工具采用多線程處理GIF編碼&#xff0c;支持Window…

Linux實戰:HAProxy全方位指南

一、負載均衡核心概念 1.1 負載均衡定義 負載均衡&#xff08;Load Balance&#xff0c;簡稱LB&#xff09;是一種基于硬件設備或軟件服務的高可用反向代理技術。它將特定業務&#xff08;如Web服務、網絡流量&#xff09;分發到后端的一個或多個服務器/設備&#xff0c;從而提…

22 BTLO 藍隊靶場 Countdown 解題記錄

Tools: - ELK - CyberChef - OSINT (whole World Wide Web) Hunt #1: Brute Force DetectedSource: winevent-security (1/3) — 可疑暴力破解流量來自哪個IP地址 What is the IP address from which the suspicious brute force traffic is seen?? 我們需要尋找暴力破解…

文心一言4.5開源模型實戰:ERNIE-4.5-0.3B輕量化部署與效能突破

文心一言4.5開源模型實戰&#xff1a;ERNIE-4.5-0.3B輕量化部署與效能突破 文心一言4.5開源模型實戰&#xff1a;ERNIE-4.5-0.3B輕量化部署與效能突破&#xff0c;本文介紹百度文心一言 4.5 開源模型中 ERNIE-4.5-0.3B 的輕量化部署與效能。該 3 億參數模型破解大模型落地的算力…

SAP-MM-采購訂單批量創建 excel 版

采購訂單批量創建程序摘要:不含任何定制字段的導入,直接導入系統即可使用 該SAP ABAP程序實現采購訂單的批量創建功能,主要特性包括: 支持通過Excel文件批量導入采購訂單數據(XLS/XLSX格式) 提供數據校驗功能,包括: 物料號有效性檢查 采購憑證存在性驗證 科目分配類別…

2_軟件重構_一種組件化開發方式

一、碎碎念 首先先考慮下&#xff0c;什么情況下軟件需要重構&#xff1f;我覺得答案有很多種&#xff0c;而且還有范圍。當日益增長的需求與現有軟件結構越來越無法匹配時——①具體表現可能為新增需求所導致的bug越來越多&#xff0c;一個新功能的改動牽一發而動全身&a…