如何使用JavaScript获取具有100个字符的base64图像文件，reactjs

Question

我正在尝试在上传文件列表后获取Base64（fileReader）图像数据 但是不能检索其名称超过100个字符的文件。 有没有办法解决此问题，我不想更改文件名，因为它的数量太多了。您可以看到随附的照片。

文件名：

1. 凯尔·拉尔森（Kyle Larson）77 NASCAR赛车运动经典T恤，男士T恤，连帽衫-KatyCollection -katyCollection 1.jpg =＆gt; Work
2. 凯尔·拉尔森（Kyle Larson）钻探NASCAR赛车运动经典T恤，男士T恤，连帽衫-KatyCollection 1.jpg =＆gt;不工作

这是我的代码

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
 });
}
async onBeforeUpload(file) {
    this.setState({ loadingUpload: true })
    var path = file.webkitRelativePath;
    let pathArray = path.split('/');
    let fName;
    if (pathArray.length == 2) {
        fName = file.name.replace(/\.[^/.]+$/, "");
    } else {
        fName = pathArray.slice(-2)[0];
    }
    //console.log(file.name.length,": ", file.name)
    let data = await getBase64(file);
    const objectImg = {
        folderName: fName,
        description: "<p>" + fName + "</p>\n",
        images: {
            data: data,
        }
     }
     this.setState({ imageList: [...this.state.imageList, objectImg] })
  }

更新：

我使用Ant Design的上传组件和上传目录

<Upload
    beforeUpload={(file) => this.onBeforeUpload(file)}
    directory
    showUploadList={false}
    accept="image/*"
    customRequest={() => {
        return false;
    }}
>
    <Button className="table-button" type="primary">Upload</Button>
</Upload>

预先提前