input file 选择文件后,修改源文件名称或删除源文件,会导致上传失败?

作者站长头像
站长
· 阅读数 11

需求场景就是普通的文件上传,但遇到了这样一个问题,步骤如下

  • 基于 input file 实现一个文件选择组件
  • 选择文件后,修改源文件名称或删除源文件
  • 点击上传,浏览器报错:net::ERR_FILE_NOT_FOUND,文件查找失败input file 选择文件后,修改源文件名称或删除源文件,会导致上传失败?

我理解 input file 选择文件后得到的 File对象 应该包含了文件流,但这个现象是上传时 浏览器 还会去读取源文件?找了一圈没看到相关资料,有经验的朋友解答一下 thx

回复
1个回答
avatar
test
2024-07-11

使用<input type="file" />选择的文件,最后的结果返回是一个文件对象,注意是文件对象不是文件本身,MDN上的文件对象说明

MDN上面提到了File对象特殊类型的BlobBlob是二进制对象,但是它也不是文件流,只不过它可以通过FileReader来转变为文件流,所你说的File对象包含文件流是不正确的,应该说File对象可以通过FileReader来获取文件流。

然后就是你的问题没找到答案,其实答案在规范里面,规范File API

这个规范中提到File对象可以通过两种方式创建:

  1. 通过构造函数在 Web 应用系统中创建;
  2. 来自底层的文件系统的文件字节序列的引用

很明显通过<input type="file" />选择的文件肯定不是通过构造函数创建出来的;

后面还提到如果是来自文件系统的字节序列的引用,那么这个对象的快照状态应该是这个磁盘上的文件状态。

注意这里是快照状态,快照可以理解为备份,最终这个File对象是引用文件系统上的文件,只是备份了状态,并不包含文件流,所以你删除了这个文件,或者重命名这个文件,是无法同步通知到这个快照状态的,这个时候因为引用的源文件丢失,最后的结果肯定是报错。

如果你想拿到文件流,可以通过上面提到的FileReader对象来获取,在选择文件之后立马获取文件流,不过你如果在选择完文件之后,立马删除文件能不能获取到文件流就不确定了,这个时候文件应该是锁定状态,删除不了,没有测试,只是猜测。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容