JS/前端/H5:實現txt文件上傳並讀取其中內容

環境：React  16.8.6

瀏覽器：Chrome

 

業務背景：使用文件批量導入數據，如：批量導入IMEI號，在前端顯示

第一步：首先你得通過input標簽來導入文件，這是瀏覽器唯一給的本地 IO 口，然后你會得到如下樣子的blob文件

 

 

 文件如下

 

 

第二步

把上述文件用 FileReader 讀取，讀取是異步的

const reader = new FileReader()
let strArr = []

try {
  strArr = `${evt.target.result}`.split(',')
} catch (e) {
  message.error('File content error !')
}

if (strArr.length > 0) {
    const gList = strArr.map(t => {

        return {
          imei: t,
          type:1,  // 添加任何你想加的屬性
        }
      })

      dispatch({
        type: 'home/updateState',
        payload: {
          gList,
        },
      });
}