js修改上传文件（File）的文件名

最新推荐文章于 2023-10-22 11:11:16 发布

青颜的天空

最新推荐文章于 2023-10-22 11:11:16 发布

阅读量8.4k

点赞数 5

分类专栏： JavaScript 文章标签： File

本文链接：https://blog.csdn.net/a1056244734/article/details/120264856

版权

75 篇文章 2 订阅

订阅专栏

本文介绍了在将网络图片转化为本地图片后，上传时遇到的File对象缺少扩展名导致的错误。作者通过分析上传工具的正确参数，发现需要File的name包含图片的扩展名。解决方案是利用File的type属性，结合时间戳创建新的文件名，避免重复并确保包含正确的文件类型信息。代码示例中展示了如何实现这一过程。

摘要由CSDN通过智能技术生成

之前文章我们已经讲述了如何将网络图片转化为本地图片，传送门：
https://blog.csdn.net/a1056244734/article/details/120261134
转好之后还需要有上传的操作，上述转换之后，File的图片名为gift文件，上传的时候遇到错误，
错误图片
懵逼…

后来使用上传工具选择本地图片上传测试之后才发现，参数一模一样，除了File文件的name有扩展名，也就是file.jpg，解析网络图片时不知道图片最终的格式，就没有手动加扩展名，导致错误。

但是解析后的File文件有type字段，比如image/gif、image/png，那么我们可以更改File的name，给它手动加上扩展名。

原理知晓，代码如下：

const type = file.type.split('/')
const renameFile = new File([file], moment().format('X') + '.' + type[1], {type: file.type});

这里moment().format('X')，使用毫秒数作为File的新的文件名以去重，大家也可以改为其他的文件名。

关注

专栏目录