前端纯JS读取上传文件内容与类型及大小限制

...
const styles = theme => ({
formControl: {
 margin: theme.spacing.unit,
 minWidth: 120,
 width: '100%',
 },
 leftIcon: {
 marginRight: theme.spacing.unit,
 }
 })
...
 <Grid item xs>
 <FormControl
  className={classes.formControl}
  error={this.state.Err.includes('sqlStr')}
 >
  <TextField
  label="SQL"
  onChange={this.onTextChange('sqlStr')}
  value={this.state.sqlStr}
  placeholder="Add Select SQL here..."
  multiline
  InputLabelProps={{
   shrink: true,
  }}
  fullWidth
  rows={6}
  variant="outlined"
  />
  <FormHelperText>{this.state.sqlStrErr}</FormHelperText>
  <input
  style={{display: 'none'}}
  name="uploadSqlFile"
  id="uploadSqlFile"
  onChange={this.handleUploadSqlFile}
  type="file"
  />
  <label htmlFor="uploadSqlFile" style={{position: 'absolute', right: '0px',bottom: '20px', background:'#f5f0ff'}}>
  <Button color="primary" variant="outlined" component="span">
  <CloudUploadOutlined className={classes.leftIcon} />OR UPLOAD SQL FILE
  </Button>
  </label>
 </FormControl>
 </Grid>
 ...

前端读取文件内容实现

handleUploadSqlFile = event => {
 let that = this
 const selectedFile = event.target.files[0]
 if(selectedFile.type.includes('text') || selectedFile.type === ''){
  let reader = new FileReader();// !important
  reader.readAsText(selectedFile, "UTF-8");// !important
  reader.onload = function(evt){// !important
  let sqlStr = evt.target.result;// !important
  that.setState({
  Err: that.state.Err.filter(c => c !== 'sqlStr'),
  sqlStr: sqlStr,
  sqlStrErr: '*Avoid duplicated column fields',
  })
 }
 }else {
  let sqlStrErr = 'File format is not supported!'
  if ((selectedFile.size / 1024 / 1024).toFixed(4) >= 2) {//计算文件大小并且换算成M为单位
  sqlStrErr = 'File size exceeds the limitation (2M)!'
  }
  this.setState({
  Err: [...this.state.Err, 'sqlStr'],
  sqlStrErr: sqlStrErr
  })
 }
}

文件上传与大小限制处理

import axios from 'axios'
...
handleUploadSqlFile = event => {
 const selectedFile = event.target.files[0]
 if ((selectedFile.size / 1024 / 1024).toFixed(4) >= 10) {
  this.setState({ sqlStrErr: 'File size exceeds the limitation (10M)!' })
 } else {
  const data = new FormData()
  data.append('file', selectedFile, selectedFile.name)
  axios
  .post('/api/utils/upload_file', data, {
   onUploadProgress: ProgressEvent => {
   this.setState({
    loaded: (ProgressEvent.loaded / ProgressEvent.total) * 100 - Math.random() * 16,//此值用来展示上传进度，好让用户知道目前的上传状态。
   })
   },
  })
  .then(res => {
   if (res.data.code === -1) {
   this.setState({ sqlStrErr: res.data.info })
   } else {
   this.setState({
    loaded: 100,
   })
   }
  })
 }
 }