Front-end file import feature to achieve

1.HTML part

<input type="file" accept='.xls,.xlsx' class="file">

accept property can be set to upload the file format

2.js part

Interface part

export function postImportRole(params) {
  return axios.post(servers + '/role/import-roles', params, {
    headers: { 'Content-Type': 'multipart/form-data;charset=UTF-8' }
  });
}

Code section

// import file 
ImportFile () { 
const that = the this ; 
const formData = new new window.FormData (); 
const Files = document.querySelector ( "INPUT [type = File]" ) .files; 
formData.append ( "File", files [0 ]);
 IF (files.length <= 0 ) {
 the this . openMessage $ ( "Please select the import file", "error" ); 
} the else {
 IF !. (/ \ (XLSX). $ / Test ( files [0 ] .name)) {
 the this . $ openMessage ( "import file format is incorrect", "error" );
} else {
postImportRole(formData)
.then(res => {
 IF (res.data.code === "0" ) { 
that.visibleImportRole = to false ;
 the this . $ OpenMessage ( "successful introduction" );
 the this .search (); 
} the else {
 the this . $ OpenMessage (RES .data.msg, "error" ); 
} 
}) 
. the catch (() =>
 the this $ openMessage ( "import fails, please check whether the correct document format", "error." ) 
); 
} 
}