核心法寶：FileReader
{
this.returnDomFun(
<>
<UploadFile
title={'AAAA'}
fileName={fileName}
onChangeInput={(e) => this.inputName(`fileName`, e.target.value)}
onChange={this.chengFileFun}
beforeUpload={this.beforeUpload}
maxCount={1}
action="#"
showUploadList={false}
/>
<a href="#!" style={{ color: 'red', fontSize: '12px', marginTop: '8px', lineHeight: "12px", marginLeft: '8px' }}>檔案內容自動追加到下方表格</a>
</>
, { width: "600px" })
}
我們只關注onChange事件即可，
chengFileFun = (filer) => {
let name = filer.file.name
//檔案物件
let fileObj = filer.file
// 實體化FileReader物件
var reader = new FileReader();
// 正則校驗
if (/text\/\w+/.test(fileObj.type)) {
reader.readAsText(fileObj.originFileObj);
// 讀取失敗自動觸發
reader.onerror = function (event) {
message.warning("檔案讀取失敗")
return false
};
// 讀取完成觸發
reader.onload = function () {
if (this.readyState === 2) {
let result = this.result.split("\r\n")
console.log(result, 'result')
}
}
}
this.setState({
fileName: name,
fileObj
})
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/384298.html
標籤：其他
上一篇：day09 - JavaScript有關陣列和物件的的深拷貝和淺拷貝問題
下一篇：Vue 電商管理系統