在上传附件的时候,有时候文件名会过长,需要处理一下,效果如下:
import React from 'react'
class Resume extends React.Component {
state = {
fileName: '请上传附件简历' //初始化,文件名
}
uploadFile = () => {
let fileInput = this.fileInput.current.files[0]
//处理文件名过长
let fileInputName = fileInput.name //获取文件名
let name = fileInputName.replace(/([^自定义字符]+)$/, '').substring(0, 8) // 获取自定义字符前的内容的前8位字符
let type = fileInputName.match(/([^自定义字符]+)$/)[1] // 获取自定义字符后的全部内容
if (name.length > 8) {
this.setState({
fileName: `${name} ···. ${type}`,
})
} else {
this.setState({
fileName: fileInputName,
})
}
//文件大小不能超过2M
const fileSize = fileInput.size / 1024
if (fileSize > 2000) {
this.toast('附件简历不能大于2M')
return
}
}
render() {
let { fileName } = this.state
return (
<label>
<span className="label">简历附件</span>
<div className="file">
<div className="file-btn">
<input
type="file"
onChange={this.uploadFile}
ref={this.fileInput}
accept="text/plain,.pdf,.csv,application/msword,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
/>
<span className="file-btn">上传附件</span>
<span className="file-tip">{fileName}</span>
</div>
<p>简历附件支持格式:pdf、txt、doc、docx,最大支持2M</p>
</div>
</label>
)
}
}
export default Resume