Javascript讀取上傳文件內(nèi)容/類型/字節(jié)數(shù)

...
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) {//計(jì)算文件大小并且換算成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,//此值用來(lái)展示上傳進(jìn)度，好讓用戶知道目前的上傳狀態(tài)。
 })
 },
 })
 .then(res => {
 if (res.data.code === -1) {
 this.setState({ sqlStrErr: res.data.info })
 } else {
 this.setState({
 loaded: 100,
 })
 }
 })
 }
 }