JS/React中获取文件名超100字符图片base64数据的解决方案

我在文件列表上传完成后，尝试通过FileReader获取图片的base64数据，但文件名长度超过100字符的文件无法正常读取。由于涉及的文件数量过多，我不希望修改原有文件名，请问是否有可行的解决方案？可参考附件截图。

测试文件名情况 #

• Kyle Larson 77 Nascar Racing Sports Classic Tee, Men's T-Shirt, Hoodie - Katycollection 1.jpg => 可正常读取
• Kyle Larson Drilling for Oil Nascar Racing Sports Classic Tee, Men's T-Shirt, Hoodie - Katycollection 1.jpg => 无法正常读取

当前实现代码 #

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组件实现目录上传功能，组件代码如下：

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

在此先行致谢。

内容的提问来源于stack exchange，提问作者Bien Albert