通過文件選擇器完成
<input type="file" id="fileInput"> or 多選 <input type="file" id="fileInput" multiple>
可以通過change事件來監聽文件的選擇，也可以添加另一個UI元素讓用戶顯式地開始對所選文件的處理
input file 具有一個files屬性，該屬性是File對象的列表（可能有多個選擇的文件）
<script> document.getElementById('fileInput').addEventListener('change', function selectedFileChanged() { console.log(this.files); // will contain information about the file that was selected. }); </script>
File對象如下所示：
{ name: 'test.txt', // 所選文件的名稱 size: 1024, // 字節大小 type: 'text/plain', // 基於文件擴展名的假定文件類型，這有可能是不正確的 lastModified: 1234567890, // 根據用戶系統的最新更改的時間戳 lastModifiedDate: // 最后修改的時間戳的日期對象 }
讀取文件，主要使用的是FileReader類。
該對象擁有的屬性：
FileReader.error ：只讀，一個DOMException，表示在讀取文件時發生的錯誤 。
FileReader.readyState：只讀 表示FileReader狀態的數字。取值如下：
FileReader.result：只讀，文件的內容。該屬性僅在讀取操作完成后才有效，數據的格式取決於使用哪個方法來啟動讀取操作。
該對象擁有的方法：
readAsText(file, encoding)：以純文本形式讀取文件，讀取到的文本保存在result屬性中。第二個參數代表編碼格式。
readAsDataUrl(file)：讀取文件並且將文件以數據URI的形式保存在result屬性中。
readAsBinaryString(file)：讀取文件並且把文件以字符串保存在result屬性中。
readAsArrayBuffer(file)：讀取文件並且將一個包含文件內容的ArrayBuffer保存咋result屬性中。
FileReader.abort()：中止讀取操作。在返回時，readyState屬性為DONE。
文件讀取的過程是異步操作，在這個過程中提供了三個事件：progress、error、load事件。
progress：每隔50ms左右，會觸發一次progress事件。
error：在無法讀取到文件信息的條件下觸發。
load：在成功加載后就會觸發。
例一：讀取文本文件
document.getElementById('fileInput').addEventListener('change', function selectedFileChanged() {
if (this.files.length === 0) {
console.log('請選擇文件！');
return;
}
const reader = new FileReader();
reader.onload = function fileReadCompleted() {
// 當讀取完成時，內容只在`reader.result`中
console.log(reader.result);
};
reader.readAsText(this.files[0]);
});
首先，我們要確保有一個可以讀取的文件。如果用戶取消或以其他方式關閉文件選擇對話框而不選擇文件，我們就沒有什么要讀取和退出函數。
然后我們繼續創建一個FileReader。reader的工作是異步的，以避免阻塞主線程和UI更新，這在讀取大文件(如視頻)時非常重要。
reader發出一個'load'事件(例如，類似於Image對象)，告訴我們的文件已經讀取完畢。
reader將文件內容保存在其result屬性中。此屬性中的數據取決於我們使用的讀取文件的方法。在我們的示例中，我們使用readAsText方法讀取文件，因此result將是一個文本字符串。
例二：顯示本地選擇的圖片
如果我們想要顯示圖像，將文件讀取為字符串並不是很有用。FileReader有一個readAsDataURL方法，可以將文件讀入一個編碼的字符串，該字符串可以用作<img>元素的源。本例的代碼與前面的代碼基本相同，區別是我們使用readAsDataURL讀取文件並將結果顯示為圖像:
document.getElementById('fileInput').addEventListener('change', function selectedFileChanged() {
if (this.files.length === 0) {
console.log('No file selected.');
return;
}
const reader = new FileReader();
reader.onload = function fileReadCompleted() {
const img = new Image();
img.src = reader.result;
document.body.appendChild(img);
};
reader.readAsDataURL(this.files[0]);
});
使用element UI el-upload 讀取本地文件
<el-upload class="upload-demo" :auto-upload="false" :on-change="openFile"> <el-button size="small" type="primary">點擊上傳</el-button> <div slot="tip" class="el-upload__tip">只能上傳txt文件，且不超過500kb</div> </el-upload>
JS實現
openFile(file) { var reader = new FileReader(); reader.onload = function () { if (reader.result) { //打印文件內容 console.log(reader.result); } }; reader.readAsText(file.raw); }