上传文件，路径为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="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
<!--用cdn源引入vue-->
<script src="//unpkg.zhimg.com/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 = true
var 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").files
const 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 = false
var 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-20200401.oss-cn-shenzhen.aliyuncs.com/20200401222616.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-20200401.oss-cn-shenzhen.aliyuncs.com/20200401222616.csv 403 (Forbidden)
解决方法：发现系统时间不一致(如何同步网络时间，baidu），改了后（我是win7系统），发现还是403，但是语句变了（问题4）
注意：
【问题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地址发送请求过多，遭到服务器智能屏蔽；
注意：
【问题5:】
-
aliyun-oss-sdk-4.14.0.min.js:10 OPTIONS http://wangxiaoxi-20200401.oss-cn-shenzhen.aliyuncs.com/test.txt 403 (Forbidden)
-
Access to fetch at ‘http://wangxiaoxi-20200401.oss-cn-shenzhen.aliyuncs.com/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直接上传
4、官方文档
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
