上传文件,路径为C:\fakepath\的问题(待跟进)
一、遇到的问题
今天在用bootstrap + vue上传本地文件到后台时,发现后台接收的本地文件路径不是真实路径(C:\fakepath\test.txt),使得后台无法通过接收前台的文件路径,对文件进行读取,并保存在数据库中。
ava.io.FileNotFoundException: File 'C:\fakepath\test.txt' does not exist
后来发现,由于**浏览器的安全机制,input file的路径时被fakepath代替,隐藏了真实物理路径。 **
上网寻求解决思路:说改浏览器安全设置的,使用**window.URL.createObjectURL()**的,都尝试了没有一个管用的。我问了一下我的学前端的同学,他建议说前台不返回路径,而是返回本地文件内容给后台,但需要在前台对文件格式进行判断。
想了一下,确实是这么一回事,如果传本地文件路径,后台和客户端不在同一台机器上,如果暴露ip地址,岂不是很危险,这里我想尝试一下hdfs,或者阿里云OSS。
首先我还是先试一下vue可不可行。我前端不太会,研究了一下用vue向后台传送文件内容,突然发现一个帖子,他说vue要想读取本地文件,就必须将本地文件放在vue项目的static下才能读取。帖子在这
那么考虑一下连接阿里云OSS吧,采用直接简单上传的方式,但是经过一整天的研究,除了发现不同的bug之外,无丝毫进展,但还是记录一下,不让感觉怪可惜的。
由于个人前端知识太渣,用的框架是springboot + vue + thymeleaf,导致有些命令在thymeleaf中写vue,常常报错(不能写template,不能独自为vue项目配置路由,好像也不能用export default来进行组件化开发)。待以后认真学了前后端分离之后,再回过头来研究如何通过签名拼配,而不是直接从网页上传文件到oss中。
---------------------------------------------------------分割线(下面为没有结果的示范)---------------------------------------------------
二、实验失败(附上代码)
<!--用cdn源引入ali-oss sdk--><script src="/aliyun-oss-sdk-4.4.4.min.js"></script><!--用cdn源引入vue--><script src="///vue@latest/dist/vue.min.js"></script> <div id="upload"><div>视频:</div><div><input type="file" id="uploadImage" @change="toUpload" placeholder=""/></div></div>
<script type="text/javascript">var app = new Vue({el: "#upload",data: {loading: false,},methods: {toUpload : function() {let _this = this;_this.loading = truevar client = new OSS.Wrapper({region: 'oss-cn-*******',accessKeyId: 'LTAI****************',accessKeySecret: 'JWHs****************',bucket: 'wangxiaoxi-****************'});console.log(client)//获取文件信息const files = document.getElementById("uploadImage")if (files.files) {const fileLen = document.getElementById("uploadImage").filesconst file = document.getElementById("uploadImage").files[0]console.log(file)let consat = file.name;let name = fileLen[0].name;for (let i = 0; i < fileLen.length; i++) {const file = fileLen[i];client.multipartUpload(name, file).then(res => {_this.loading = falsevar str = res.res.requestUrls[0]console.log(str.split("?")[0])_this.$emit('childByValue', str.split("?")[0])}).catch((err) => {console.log(err)})}}}</script>
三、期间遇到的问题
**【问题1:】 **
client.put(…).then is not a function 或者 client.multipartUpload(…).then is not a function
解决方法:promise用法需要使用OSS.Wrapper
注意:
Wrapper是大写的,否则会报OSS.wrapper is not a constructor参考文档
【问题2:】
Access to XMLHttpRequest at ‘http://wangxiaoxi-2001.oss-cn-/2001222616.csv’ from origin ‘http://localhost:8081’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
解决方法:对阿里云oss进行跨域设置
注意:
跨域设置不在基础设置中(老版本),而在权限管理中(新版本)参考文档
【问题3:】
oss设置跨域规则之后一只是403
OPTIONS http://wangxiaoxi-2001.oss-cn-/2001222616.csv 403 (Forbidden)
解决方法:发现系统时间不一致(如何同步网络时间,baidu),改了后(我是win7系统),发现还是403,但是语句变了(问题4)
注意:
阿里云OSS跨域AJAX上传OPTIONS请求403问题的解决方案阿里云oss上传文件 使用node.js 报403错误
【问题4:】
Failed to load resource: the server responded with a status of 403 (Forbidden)
解决方法:
我暂时没有找到(官网说“4.14.0有bug,升级版本成4.14.1即可“,但是更新cdn源后,发现在浏览器中根本加载不出来,想考虑用本地资源,算了,以后再试吧,赶毕设要紧)
403 (Forbidden)主要原因:
1、网站域名解析到了服务器,但服务器未绑定此域名;
2、你的网页脚本文件在当前目录下没有执行权限;
3、在不允许写/创建文件目录中执行了创建/写文件操作;
4、在一定时间内过多的访问此网站(一般是采集程序),被 防火墙拒绝访问了;
5、你的IP被列入黑名单;
6、服务器繁忙,同一IP地址发送请求过多,遭到服务器智能屏蔽;
注意:
参考文档
访问OSS时出现403状态码的排查方法
Failed to load resource: the server responded with a status of 403 (Forbidden)
【问题5:】
aliyun-oss-sdk-4.14.0.min.js:10 OPTIONS http://wangxiaoxi-2001.oss-cn-/test.txt 403 (Forbidden)
Access to fetch at ‘http://wangxiaoxi-2001.oss-cn-/test.txt’ from origin ‘http://localhost:8081’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
解决方法:
和之前出现的异常有点类似,暂时没有找到解决方法
四、参考文档
1、vue前端上传文件到阿里云oss的两种方式,put文件流上传,multipartUpload直接上传
2、vue上传OSS前端实现直传阿里云
3、vue页面使用阿里oss上传功能(一)
4、官方文档