使用js获取上传文件的路径?

由于浏览器的安全限制,<input type="file">通过js的onchange事件获取上传文件的路径时,返回的是C:fakepath文件名,隐藏了真实的物理路径,可以使用window.URL.createObjectURL()返回一个Blob对象,Blob对象就是二进制数据,它是一个包含有只读原始数据的类文件对象
组件upload:

clipboard.png

clipboard.png
当点击按钮时触发SendDocument方法

clipboard.png
this.$refs.upload.submit();会触发beforeUpload方法
打印结果如下:

clipboard.png

clipboard.png
就可以把blob对象传给extrinsicFileName(表单里的一个字段)
这样可以把表单的数据提交给后台了

那么重点是,你为什么要获取上传文件的路径?

我是一个初学者,刚刚开始学习做上传文件这个功能,简单以为要把文件路径返回给后台,通过他们去获取上传文件的数据。

那么上传文件功能实际上是不需要获取文件路径的,而是通过二进制流传过去的,上面的blob对象其实就是表示文件的二进制数据,通过文件流的方式传输,在计算机里所有的对象都是通过二进制流传输的。Blob对象是File类型的父类型,就是Flie对象通过slice()读取整个文件的部分数据。File包含name、size、type等属性,Blob有size、type属性。所以上传文件是直接把客户端的文件数据发送到服务端,不是文件路径,而是整个文件的数据,客户端下载服务端的就可以通过服务端的路径找到服务端的文件,服务端是没有办法通过路径访问客户端文件的。
除非是,服务端返回一个路径,比如“c:/aa.txt”,然后客户端收到这个路径,通过代码找到这个文件,之后再把这个aa.txt整个文件数据发送给服务端,其实说到底还是客户端把整个文件数据发送给服务端。

基础没打牢就开始学习框架,我开始怀疑自己是不是走错路线了,不过学习总是一个循序渐进的过程,不可能是直线式的,想和大家多交流,所以以后还请大家多多指教。

  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值