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

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

使用js获取上传文件的路径?_第1张图片

使用js获取上传文件的路径?_第2张图片
当点击按钮时触发SendDocument方法

使用js获取上传文件的路径?_第3张图片
this.$refs.upload.submit();会触发beforeUpload方法
打印结果如下:

clipboard.png

使用js获取上传文件的路径?_第4张图片
就可以把blob对象传给extrinsicFileName(表单里的一个字段)
这样可以把表单的数据提交给后台了

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

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

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

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

你可能感兴趣的:(使用js获取上传文件的路径?)