在网站开发的某些情况下我们需要上传文件到服务器，在这个过程中可能会对文件做一定的限制，比如说文件格式，文件大小等，在一些情况下我们上传文件其实是为了获取其中的内容在前端区域展示，这个时候就不需要将文件上传到服务器，完全可以通过爪哇岛描述语言来获取上传文件内容然后进行展示，既加快了操作速度，也减轻了服务器的负载和存储。接下来就是一个实际操作的过程：

首先来看一下一个上传文件对象的属性：

用户界面设计（反应材料-用户界面)

.const style=theme=({ form control : { margin 3360 theme。间距。单位，最小宽度： 120，宽度： '100% '，}，左侧con : {右边距：主题。间距。单位，}).网格项xs FormControl类名={ class。FormControl }错误={ this。国家。呃。包括(' SQLStr ')} TextField标签=' SqL ' onChange={ this。ontextchange(' SqLStr ')}值={ this。国家。SqLStr }占位符='在此添加选择' SqL . 'multiline InputLabelProps={ { shrink : true，} }全宽行={ 6 } variant=' outline '/FormHelperText { this。国家。sqlstrerr }/FormHelperText输入样式={{display: 'none'}}名称=' uploadSqlFile ' id=' uploadSqlFile ' OnChange={ this。handleuploadsqlfile }类型=' FILE '/标签html FOr=' uploadSqlFile '样式={ { position:效果图如下：

操作绑定，分别包含前端文件内容读取和文件上传

handleUploadSqlFile=event={ let那=这个常量选择的文件=event。目标。文件[0]if(所选文件。打字。包括('文本')| |选定的文件。type==' '){ let reader=new file reader()；//!重要读者。readAsText(selectedFile，‘UTF-8’)；//!重要读者。onload=function(evt){//！重要让SqLStr=evt。目标。结果；//!重要说明。setstate({ Err :国家。呃。过滤器(c=c！=='sqlStr ')、sqlStr: sqlStr、sqlStrErr: ' *避免重复的列字段',})} }否则{让' sqlStrErr='不支持文件格式!'if((所选文件。尺寸/1024/1024 ).toFixed(4)=2) {//计算文件大小并且换算成M为单位"文件大小超过限制(2M)！”} this.setState({ Err: [.this.state.Err，' sqlStr']，sqlStrErr: sqlStrErr }) }}上边的示例只是单纯的前端文件内容读取，并未涉及文件上传到服务器，接下来是：

从“axios”导入爱可信.handleUploadSqlFile=event={ const selected file=event。目标。文件[0]if((选定的文件。尺寸/1024/1024 ).toFixed(4)=10){ this。setstate({ sqlstrerr3360 '文件大小超过限制(10M)！”})} else { const data=new FormData()数据。追加(' file '，selectedFile，selectedFile.name) axios .post('/api/utils/upload_file '，数据，{ onuploaddprogress : progress事件={ this。setstate({ loaded :(progress事件。已加载/进度事件。总计)* 100-数学。random()* 16，//此值用来展示上传进度，好让用户知道目前的上传状态。 }) }, }) .然后(RES={ if(RES . data。代码====-1){这个。setstate({ sqlstrerr : RES . data。info })} else { this。setstate({ loaded : 100，})} } }如果看了上边的代码示例还搞不定欢迎留言提问！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。