2024年input框前端解析文本，不传给后台 (使用antd-Upload)，淘宝前端面试题

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

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

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 () {

//加载完毕之后

//console.log(this.result);

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

setArticleTitle(filename.split(“.”) ? filename.split(“.”).slice(0,filename.split(“.”).length-1).join(‘.’) : “”);//文件标题处理，把后缀去掉

setFile(filename);

};

reader.readAsText(file);

}

return false;

},

showUploadList: false, //不显示文件list

};

…

…

<Dragger {…props}>

{filename.length == 0 ? (

<>

导入markdown

拖拽上传/点击上传

</>

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

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

频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中…(img-DAkR0swA-1715343479763)]

[外链图片转存中…(img-Q9opS7DH-1715343479763)]