input框前端解析文本，不傳給後臺 (使用antd-Upload)

需求：想給自己的博客加一個本地上傳的功能但是不需要現在就發給後端，只要解析在輸入框中
參考：https://www.cnblogs.com/mq0036/p/11566061.html
先用原生的html解析

<input type="file" onChange={play.bind(this)}/>

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(p) {
  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}>
      <Button>
        <UploadOutlined /> Click to Upload
      </Button>
    </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}>
            <p className='ant-upload-drag-icon' style={{ padding: "0" }}>
              <InboxOutlined />
            </p>
            {filename.length == 0 ? (
              <>
                <p className='ant-upload-text'>導入markdown</p>
                <p className='ant-upload-hint'>拖拽上傳/點擊上傳</p>
              </>
            ) : (
              <p className='ant-upload-text'>{filename}</p>
            )}
          </Dragger>


...
...
.ant-upload.ant-upload-drag{
    height:auto;
    min-height: 100px;
}