2024年前端最全input框前端解析文本，不传给后台 (使用antd-Upload)(1)，学web开发技术

最后

资料过多，篇幅有限

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

const play=(e)=>{

//支持chrome IE10

if (window.FileReader) {

//console.log(input.target.files)//得到文件

var file =e.target.files[0];

let filename = file.name.split(“.”)[0];//文件名

var reader = new FileReader();

reader.onload = function() {//加载完毕之后

console.log(reader.result);

}

reader.readAsText(file);

}

else console.log(‘不支持FileReader’)

}

console可以输出我需要的文本了

然后转到ant的upload组件

封装的上传按钮，通过befoUpload并return false拦截

function Upto§ {

let props = {

name: “file”,

beforeUpload(file, list) {

if (window.FileReader) {

let filename = file.name.split(“.”)[0]; //文件名

var reader = new FileReader();

reader.onload = function () {

//加载完毕之后

//console.log(this.result);

p.setArticleContent(reader.result); //文件传给输入栏

};

reader.readAsText(file);

}

return false;

},

};

return (

<Upload {…props}>

Click to Upload

);

}

效果如下

改进一点

let [filename, setFile] = useState(“”); //存储导入文件名

let props = {

name: “file”,

beforeUpload(file, list) {

//注意：IE9 不支持该方法。

console.log(list);

if (window.FileReader) {

let filename = file.name; //文件名

var reader = new FileReader();

reader.onload = function () {

//加载完毕之后

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

mg-pYcKYnHV-1714981415477)]

[外链图片转存中…(img-NfqgvsiB-1714981415478)]

[外链图片转存中…(img-0WhJqGpk-1714981415478)]

[外链图片转存中…(img-FUIK6q9B-1714981415479)]