上传文件，路径为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、官方文档
